我已经在这个网站上检查了多个答案,但无论出于何种原因,他们都无法解决我的问题(如何使用 JQuery 中的锚标记从其他页面中选择特定选项卡..?)。我只是在我的本地计算机上测试这个,所以我不确定这是否会产生影响。
我想从当前页面以及其他页面链接到每个选项卡。现在我可以单击每个选项卡,它可以完美运行,并且站点 URL 会更改(#tab1、#tab2 等)。
但是,例如,如果我在选项卡 2 可见时单击选项卡 1 链接(不是实际的选项卡,而是页面上针对选项卡 1 的链接),则什么都不会发生,但 URL 会更改为 /site.html#tab1 . 但是,如果我在选项卡 1 可见时单击选项卡 1 链接,它会成功将我带到选项卡 1。出现问题,因为选项卡是隐藏的 - 链接仅适用于当前可见的选项卡。我想如果我至少可以让它在页面内工作,我也可以从页面外的链接让它工作。
基本上,我希望能够向某人发送一个链接/site.html#tab3
并将其转到该选项卡。
我的代码:
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return;
});
});
和:
$(document).ready(function () {
var tabId = window.location.hash; // will look something like "#h-02"
$(tabId).click(); // after you've bound your click listener
});
和标签:
<ul class="tabs">
<li><a href="#tab1">Ex 1</a></li>
<li><a href="#tab2">Ex 2</a></li>
<li><a href="#tab3">Ex 3</a></li>
<li><a href="#tab4">Ex 4</a></li>
以及一个示例选项卡内容和页面上指向该选项卡的链接:
//tab content
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Ex 1</h2>
//Link to Tab 1 from right menu
<ul><li>
<a href="#tab1">Click here to go to tab 1</a></li></ul>
谢谢!!