Question

我有自举选项卡，单击相应的菜单选项卡时将显示内容

我想要点击特定菜单时自定义类应该激活该菜单而不是每个菜单标签。

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

$(document).ready(function(){
    //function of collapse and tabpen   
    $(document).on('click','.nav-link.active', function(){
      var href = $(this).attr('href').substring(1);
    //alert(href);
      $('.tab-pane[id="'+ href +'"]').toggleClass('active');

    });
    $('.nav-link').click(function(){
     $('this').addClass('addplus');
    });

});

Answer 1

那里不需要两个不同的代码，在单个代码中，每个东西都可以工作： -

$('.nav-link').click(function(){
 $('.nav-link').removeClass('addplus active');//first remove classes from previous nav link
 $(this).addClass('addplus active'); //remove '' around this
 var href = $(this).attr('href').substring(1);
 $('.tab-pane').removeClass('active');
 $('.tab-pane[id="'+ href +'"]').toggleClass('active');
});

演示示例： -

＆＃13;

$(document).ready(function(){
  $('.nav-link').click(function(){
    $('.nav-link').removeClass('addplus active');
    $(this).addClass('addplus active');
    var href = $(this).attr('href').substring(1);
    $('.tab-pane').removeClass('active');
    $('.tab-pane[id="'+ href +'"]').toggleClass('active');
  });
});

＆＃13;

.active{
  color:green;
  font-size:20px;
}

.addplus{
  font-style:italic;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane" id="home" role="tabpanel">home</div>
  <div class="tab-pane" id="profile" role="tabpanel">profile</div>
  <div class="tab-pane" id="messages" role="tabpanel">messages</div>
  <div class="tab-pane" id="settings" role="tabpanel">settings</div>
</div>

＆＃13;

注意： -

我重新创建了您的//function of collapse and tabpen函数，以便它也能正常工作。您可以查看示例。谢谢

点击更改当前导航链接的类不是全部

1 个答案: