如何在单击时将两个不同的活动类添加到两个不同的选项卡（它在图像上的外观）

Question

我正在努力提高我的 JQuery/JavaScript 技能，我一直在尝试制作一个带有 3 个标签的标签导航（这显然只是为了练习，因为肯定有更多方法可以使用这种技术）
我正在尝试制作的屏幕截图：http://prntscr.com/n8l9jf

我对 JS 还很陌生，这就是为什么我要问这个问题。我知道如何将一个活动类添加到一个选项卡并使用数据目标更改为该选项卡，但这显然更高级。

<div class="nav-item" id="nav-item1" data-target="#blog-con">
    <i class="fas fa-home"></i>
    <h6>HOME</h6>
</div>
            <!-- Resume/CV Tab -->
<div class="nav-item" id="nav-item2" data-target="#cv-con">
    <i class="fas fa-file-alt"></i>
    <h6>RESUME</h6>
</div>
            <!-- Web Tab -->
<div class="nav-item" id="nav-item3" data-target="#web-con">
     <i class="far fa-window-maximize"></i>
     <h6>WEB-DESIGN</h6>
</div>

$('.nav-item').click(function() {
    var $target = $($(this).data('target'));
    $('.tab').not($target).hide();
    $target.show();
});

This is the code I used to create the screenshot
<div id="tabs">
    <div class="tab active" id="business" data-target="#busi-con">
         <p>information.html</p>
     </div>
     <div class="tab inactive" id="front.html" data-target="#front-con">
          <p>front.html</p>
     </div>
     <div class="tab inactive" id="main.css" data-target="#main-con">
          <p>main.css</p>
     </div>
 </div>

the css for the example
.tab{
    padding: 5px 20px 5px 20px;
    background-color: #3a3837;
    border-radius: 10px 10px 0 0;

}
.active{
    box-shadow: 5px 5px 10px black;
    z-index: 999;
}
.active2{
    box-shadow: 5px 5px 10px black;
    z-index: 950;
    opacity: 0.8;
}
.active3{
    box-shadow: 5px 5px 10px black;
    z-index: 900;
    opacity: 0.6;
}

简而言之：我想要实现的是让非活动标签看起来更暗。 so inactive 不透明度为 0.8，inactive2 为 0.6。并且计划还以始终从左到右的方式来决定哪些是非活动的，哪些是非活动的2类添加的。
我希望这不是写得太复杂。
我真的很感谢任何帮助我解决这个问题的人。我只是一个学生，显然我还在学习中

Answer 1

您可以通过 css 使用 + 选择器来做到这一点

$('.nav-item').click(function() {
    $('.nav-item').not(this).removeClass('active');
    $(this).addClass('active');
});

/* default class style */
.nav-item{
  display : inline-block;
  background : #000;
  color : #fff;
}
.nav-item > h6{
  border-bottom : 5px solid #fff;
  padding : 10px;
  min-width : 100px;
  text-align : center;
  font-size : 20px;
  opacity : 0.4;
}

/* active class style */
.nav-item.active > h6{
  border-bottom : 5px solid red;
  opacity : 1;
}

/* next div of active */
.nav-item.active + div.nav-item > h6{
  border-bottom : 5px solid yellow;
  opacity : 0.6;
}

/* next next of active */
.nav-item.active + div.nav-item + div.nav-item > h6{
  border-bottom : 5px solid green;
  opacity : 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-item" id="nav-item1" data-target="#blog-con">
    <i class="fas fa-home"></i>
    <h6>HOME</h6>
</div>
            <!-- Resume/CV Tab -->
<div class="nav-item" id="nav-item2" data-target="#cv-con">
    <i class="fas fa-file-alt"></i>
    <h6>RESUME</h6>
</div>
            <!-- Web Tab -->
<div class="nav-item" id="nav-item3" data-target="#web-con">
     <i class="far fa-window-maximize"></i>
     <h6>WEB-DESIGN</h6>
</div>