我有一个标签式菜单,标签式菜单中的一个页面有一个链接需要转到另一个标签页。
怎么做?我尝试了顺畅的卷轴,但它没有用。
HTML:
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
<li>
<div class="content__wrapper">
<a href="tab1" data-anchor="#tab1">Link</a>
</div>
</li>
</ul>
</section>
答案 0 :(得分:1)
尝试以下点击事件:
$('[data-anchor="#tab1"]').on("click", function(e){
e.preventDefault();
$(".tabs > li").removeClass("active"); //Remove class from active tab
$('.tabs > li:first').addClass("active"); //Add class active to clicked tab
clickedTab = $(".tabs .active"); //Update clickedTab variable
// fade out active tab
activeTab.fadeOut(250, function(){
$(".tab__content > li").removeClass("active"); //Remove active class all tabs
var clickedTabIndex = clickedTab.index(); //Get index of clicked tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active"); //Add class active to corresponding tab
activeTab = $(".tab__content > .active"); //update new active tab
activeTabHeight = activeTab.outerHeight(); //Update variable
//Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function(){
activeTab.delay(50).fadeIn(250); // Fade in active tab
});
});
});
见demo: