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

简而言之：我要实现的目的是使不活动的选项卡显得更暗。因此在不透明度为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>

如何在单击时将两个不同的活动类添加到两个不同的选项卡（图像上的显示方式）

1 个答案: