[英]Toggling lottie hamburger/menu animation on .nav-link click?
[英]on click change the class for current nav-link not all
我有引導程序選項卡,單擊相應菜單選項卡時將顯示內容
我希望在單擊特定菜單時,自定義類應在該菜單上而不是每個菜單選項卡上均處於活動狀態。
<!-- 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');
});
});
那里不需要兩個不同的代碼,在一個代碼中,一切都可以工作:
$('.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');
});
演示示例:-
$(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'); }); });
.active{ color:green; font-size:20px; } .addplus{ font-style:italic; }
<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>
注意:-
我重新創建了//function of collapse and tabpen
函數,以便它也能正常工作。 您可以簽入示例。謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.