Javascript 如何设置活动选项卡_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 如何设置活动选项卡

javascript jquery html css twitter-bootstrap

Javascript 如何设置活动选项卡,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我在bootstrap上做了一个标签菜单。但我想不出活动选项卡如何设置活动选项卡的样式，当我定义活动类时，它只影响第一个选项卡下面是我的密码 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous

我在bootstrap上做了一个标签菜单。但我想不出活动选项卡

如何设置活动选项卡的样式，当我定义活动类时，它只影响第一个选项卡

下面是我的密码

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      <script>
   jQuery(function($){
       $(".circle").children("circle").click(function(){
           $(".active").removeClass("active");
       });
   });
</script>
  </head>
  <body>

<!-- Nav tabs --><div class="d-none d-sm-block girintile">
<ul class="nav nav-justified" role="tablist">
  <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab"> <div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle active"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-4" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-5" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
</ul></div>

<!-- Tab panes -->
<div class="tab-content girintile "><br>
  <div class="tab-pane box active" id="section-1" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok</h4><p class="text-justified girintile"> yunus</p></div>
  <div class="tab-pane box" id="section-2" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok1</h4><p class="text-justified girintile"> melih</p></div>
  <div class="tab-pane box" id="section-3" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok2</h4><p class="text-justified girintile"> gözütok</p></div>
  <div class="tab-pane box" id="section-4" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok3</h4><p class="text-justified girintile"> lipsum</p></div>
  <div class="tab-pane box" id="section-5" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok4</h4><p class="text-justified girintile"> lipsum</p></div>
</div>


jQuery（函数（$）{
$（“.circle”）。子对象（“circle”）。单击（函数（）{
$（.active”）.removeClass（“active”）；
});
});














尤努斯·梅利赫·居托克
Yunus Melih Gözütok1Melih
尤努斯·梅利赫·格苏托克
Yunus Melih Gözütok3lipsum
Yunus Melih Gözütok4lipsum

只需使用此代码即可

$(".nav-item .nav-link").click(function(e){
  e.preventDefault();
  $(this).addClass("active");
  $(".nav-item .nav-link").not($(this)).removeClass("active");
})

我刚刚添加了一些带有红色文本的活动类，当您单击每个项目时，红色将应用，剩余的将与蓝色文本相同


.主动{
颜色：红色！重要；
}
$（“.nav item.nav link”）。单击（函数（e）{
e、 预防默认值（）；
$（此）.addClass（“活动”）；
$（“.nav item.nav link”）.not（$（this））.removeClass（“active”）；
})














尤努斯·梅利赫·居托克
Yunus Melih Gözütok1Melih
尤努斯·梅利赫·格苏托克
Yunus Melih Gözütok3lipsum
Yunus Melih Gözütok4lipsum

供您参考。看看这个。