除了在单击“ul.tab_nav li a”时尝试将类“current_tab”应用到“ul.tab_nav li”之外,所有这些都有效。
JQuery
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link
tab.find('.tab_content').slideUp(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
和 html
<div class="box tabs siteBackgroundColor">
<div class="box_header">
<ul class="tab_nav">
<li class="dummyTab"><a href=".tab1" class="iconTab"> </a></li>
<li><a href=".tab2" class="iconTab iconTabWifi"> </a></li>
<li><a href=".tab3" class="iconTab iconTabWeb"> </a></li>
<li><a href=".tab2" class="iconTab iconTabHours"> </a></li>
<li><a href=".tab4" class="iconTab iconTabMap"> </a></li>
<li><a href=".tab3" class="iconTab iconTabPhone"> </a></li>
<li><a href=".tab4" class="iconTab iconTabShare"> </a></li>
</ul>
</div>
<div class="box_content tab_content tab1 dummyTab"></div>
<div class="box_content tab_content tab2">
<p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
</div>
<div class="box_content tab_content tab3">3<br />
3<br />
3<br />
3</div>
<div class="box_content tab_content tab4">4<br />
4<br />
4<br />
4<br />
4</div>
</div>
除此之外,它正在按照我需要的方式工作。
最佳答案
试试这个,
tab.find('ul.tab_nav li').removeClass('current_tab');
$(this).closest('li').addClass('current_tab'); //Set clicked link li to active
<强> Demo 1
要设置事件
链接,然后再尝试,
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
<强> Demo 2
代替
tab.addClass('current_tab'); //Set clicked link class to active
更新您应该使用hide()
代替slideup()
,它不会为关闭的div
设置动画> 并检查事件选项卡
(如果它是您的current_tab
),然后对 anchor 点击
使用return false
<强> Demo 3
关于javascript - Jquery 获取选项卡以在事件时添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19418638/