使用JQuery中的锚点链接到当前页面和其他页面中的特定(隐藏)选项卡? [英] Linking to a particular (hidden) tab from the current page and other pages using anchors in JQuery?
问题描述
我已经在这个网站上检查了多个答案,但由于某种原因他们无法解决我的问题(如何使用JQuery中的锚标记从其他页面中选择特定的选项卡??)。我只在我的本地计算机上测试这个,所以我不确定这是否会产生影响。
I've examined multiple answers on this site but they haven't been able to solve my problem for whatever reason (how to select a particular tab from other page using anchor tag in JQuery..?). I am only testing this on my local computer so I'm not sure if that would have an impact.
我想链接到当前页面的每个标签从其他页面。现在我可以单击每个选项卡,它可以正常工作,站点URL也会更改(#tab1,#tab2等)。
I want to link to each tab from the current page as well as from other pages. Right now I am able to click each tab and it works perfectly and the site URL changes (#tab1, #tab2 etc).
但是,例如,如果我单击选项卡1链接(不是实际选项卡,而是针对选项卡1的页面上的链接),而选项卡2是可见,没有任何反应,但URL更改为/site.html#tab1。但是,如果我在选项卡1可见时单击选项卡1链接,它会成功将我带到选项卡1.出现问题,因为选项卡已隐藏 - 链接仅适用于当前可见的选项卡。我想如果我至少可以在页面内工作,我也可以从页面外的链接开始工作。
However, for example, if I click the Tab 1 Link (not the actual tab, but a link on the page that is targeted at tab 1) while Tab 2 is visible, nothing happens but the URL changes to /site.html#tab1. However, if I click the Tab 1 link while Tab 1 is visible, it successfully brings me to Tab 1. Something is going wrong because the tabs are hidden - links only work for the tab that is currently visible. I figure if I can at least get it working within the page, I can get it working from links outside the page as well.
基本上,我希望能够向某人发送 /site.html#tab3
的链接,并将其转到该标签。
Basically, I want to be able to send someone a link to /site.html#tab3
and have it go to that tab.
我的代码:
$(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>
一个示例标签内容&选项卡页面上的链接:
And an example tab content & a link on the page to the tab:
//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>
谢谢!!
推荐答案
看到这个:
当你的页面加载时(当dom准备就绪时)这样做
Do this when your page loads (when dom is ready)
var tabId = location.hash; // will look something like "#h-02"
检查哈希值
if(tabId){
$(tabId).show(); // this will fired only when url get hash
$(tabId).siblings().hide(); // this will show only targeted tab
// others get hidden
}
当你得到这样的网址时会做什么 site.html#tab1
what this will do when you get a url like this site.html#tab1
变量tabId
将具有值#tab1
然后条件为if代码块将显示目标选项卡
then condition in if code block will show the targeted tab
这篇关于使用JQuery中的锚点链接到当前页面和其他页面中的特定(隐藏)选项卡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!