[英]Creating accordion tabs and add IDs dynamically and links to anchor to IDs in jQuery
[英]jQuery tabs switch and anchor links
我制作了兩個選項卡,一個可以切換到另一個,在Tab1上放置了3個指向Tab2文章的錨鏈接。 如何單擊tab1的鏈接,然后打開tab2並轉到錨點? 如果有人可以幫助我。 謝謝。
的HTML
<div class="wrap">
<a href="#tab1" class="active">Tab1</a>
<a href="#tab2">Tab2</a>
<div id="tab1">
<a href="#anchor_a" >ANCHOR POINT A</a>
<a href="#anchor_b">ANCHOR POINT B</a>
<a href="#anchor_c">ANCHOR POINT C</a>
</div>
<div id="tab2">
<div id="anchor_a"></div>
<div id="anchor_b"></div>
<div id="anchor_c"></div>
</div>
</div>
JS
$('.wrap > div').eq(1).hide();
$('.wrap > a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.wrap > div').hide().filter(this.hash).show();
});
<div class="wrap">
<div id="tabs">
<a href="#tab1" class="active">Tab1</a>
<a href="#tab2">Tab2</a>
</div>
<div class="tabs-data">
<div id="tab1">
<a href="#anchor_a" >ANCHOR POINT A</a>
<a href="#anchor_b">ANCHOR POINT B</a>
<a href="#anchor_c">ANCHOR POINT C</a>
</div>
<div id="tab2">
<div id="anchor_a"></div>
<div id="anchor_b"></div>
<div id="anchor_c"></div>
</div>
</div>
</div>
JS:
$(document).on('click', '#tabs a', function(e){
e.preventDefault();
if ($(this).hasClass('active')){
return false;
} else {
var wrap = $(this).parents('.wrap');
$(this).parent().find('a').removeClass('active');
$(this).addClass('active');
wrap.find('.tabs-data > div').hide();
wrap.find('.tabs-data ' + $(this).attr('href')).show();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.