Как я могу добавить два разных активных класса на две разные вкладки по клику (как это выглядит на изображении)

Question

Я пытаюсь улучшить свои навыки работы с JQuery / JavaScript, и я пытался сделать навигацию по вкладкам с 3 вкладками (это, очевидно, просто на практике, так как есть определенно больше способов использовать эту технику)
Скриншот того, что я пытаюсь сделать: http://prntscr.com/n8l9jf

Я довольно новичок в JS, поэтому я спрашиваю об этом, очевидно. Я знаю, как добавить активный класс на одну вкладку и перейти на эту вкладку с помощью data-target, но, очевидно, это немного сложнее.

<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;
}

В краткой форме: я пытаюсь добиться того, чтобы неактивные вкладки казались темнее. поэтому неактивен с непрозрачностью 0,8 и неактивен с 0,6. И план также состоит в том, чтобы принять решение о том, что неактивно и что добавлено класс inactive2 исправлено, таким образом, что всегда слева направо.
Я надеюсь, что это не написано сложным.
Я очень благодарен всем, кто помогает мне с этим. Я всего лишь студент, и, очевидно, я все еще учусь

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>