我正在使用多个页面,每个页面都有jQuery选项卡 . 假设我有#tab1和#tab2的Page1.html和#tab3和#tab4的Page2.html . 我的代码有以下问题:
1)在标签内容中,Page1.html#tab2有一个指向Page1.html#tab1的超链接 . 链接不起作用 - 单击链接时页面只停留在#tab1上 . 但是,第1页到#tab1上的菜单容器中的超链接确实有效 . 两个超链接都使用相同的href =“#tab1”,但无论出于何种原因,链接到Page1.html#tab1时,只有Page1.html#tab2内容之外的链接有效 . 菜单容器中的超链接始终有效 .
2)如果我向某人发送了一个指向www.Page1.html#tab2的超链接,页面URL显示为www.Page1.html,其中显示选项卡1,这意味着我无法直接链接到选项卡 . 但是,网站上的菜单确实正确链接到选项卡 . 如果我在浏览Page1.html时单击Page2.html#tab3的菜单链接,该选项卡将正确加载,并且URL显示Page2.html#tab3,即使我单击页面上的#tab4也将保持这种状态 . 单击菜单超链接到不同页面时,URL仅会更改,即Page1.html#tab1到Page2.html#tab3 . 在Page2.html#tab4上点击Page2.html#tab3,标签内容将正确更改为#tab3,但该网址仍将保留为Page2.html#tab4 .
What I Want:
A)能够将某个链接直接发送给选项卡 . 向某人发送指向www.Page1.html#tab2的链接将始终作为URL www.Page1.html加载,并显示第一个选项卡 . 但是,页面上的菜单超链接可以正常工作 .
B)如果链接在选项卡内容中,则能够在同一页面上的选项卡之间进行链接 . 例如,Page1.html#tab1内容中的链接应该能够链接到Page1.html#tab2 . 现在,它仅在Page1.html#tab1内容中的链接链接到单独页面(如Page2.html#tab3)上的选项卡时才有效 .
C) EXTRA CREDIT :当我直接单击选项卡时,选项卡图像"pops" out和先前选择的选项卡"unpops" . 当我单击菜单超链接到选项卡时,即使显示新选择的选项卡的正确内容,前一个选项卡仍会弹出 . 或者,如果使用菜单链接前往新页面上的选项卡,则不显示选项卡,但会显示正确的选项卡内容 . 我认为解决上述问题也可以解决这个问题 .
这是我的代码:
<script type="text/javascript">
$(document).ready(function() {
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
$(function () {
$('a[href^="#"]').click(function(e){
e.preventDefault();
$('html,body').scrollTop($(this.hash).offset().top - 50);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var tabContents = $(".tab_content").hide(),
tabs = $("ul.tabs li, .rgtPanelBox ul li"); // Second selector to match left hand sidebar
var tabId = location.hash;
if(tabId) {
$(tabId).show();
}
else {
tabs.first().addClass("active").show();
tabContents.first().show();
}
tabs.click(function() {
var $this = $(this),
activeTab = $this.find('a').attr('href');
if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
$this.addClass('active').siblings().removeClass('active');
tabContents.hide().filter(activeTab).fadeIn();
}
return;
});
});
</script>
无论如何,我是一个巨大的菜鸟,所以你提供的代码越好,我就越容易批准你的答案是正确的 . :)
谢谢!
1 回答
您需要制作锚标签 hashable ,即为前端用户制作'bookmarkable' . 您似乎正在创建自己的选项卡插件,但jQuery UI将为您执行散列部分 . 如上所述,这是一个演示设置选项卡:
http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/
DEMO:
这是演示页面 - > http://muledesign.com/demo/tabs/default-tabs.html
带有哈希链接到标签的演示页面 - > http://muledesign.com/demo/tabs/default-tabs.html#movie
Re:C) - 尝试使用灯箱插件并将灯箱插件open / init功能附加到UI选项卡上的 activate 事件 - > http://api.jqueryui.com/tabs/#event-activate
我很感激你可能不想使用插件,但你已经在使用jquery了 .