[英]Link directly to tab from anchor link
我正在嘗試直接從錨定鏈接(如返回3選項卡)進行鏈接,但我無法使其正常工作。 它從菜單中可以正常工作,但是當我嘗試從tab5鏈接到tab3時,無法使用錨點。
這是我正在使用的JS。
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
我的代碼有問題還是遺漏了?
如果我正確理解了您想以編程方式更改選項卡的情況,則可以使用$('.tabs').tabs('option', 'active', tab_index);
,請查看下面的示例。
希望這可以幫助。
$(function() { $('.tabs').tabs(); $("#go_to_tab_3").click(function() { $('.tabs').tabs('option', 'active', 2); //index 2 mean tab 3 }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="tabs"> <ul> <li><a href="#tabs-1">Tab 1 </a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1"> <p>tab 1 content.</p> </div> <div id="tabs-2"> <p>tab 2 content.</p> </div> <div id="tabs-3"> <p>tab 3 content.</p> </div> </div> <br> <button id='go_to_tab_3' type='button'>Go to tab 3</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.