我正在使用多个页面,每个页面都有 jQuery 选项卡。假设我有带有#tab1 和#tab2 的Page1.html 和带有#tab3 和#tab4 的Page2.html。我的代码存在以下问题:
1) 在标签内容中,Page1.html#tab2 有一个指向 Page1.html#tab1 的超链接。该链接不起作用 - 单击链接时页面仅停留在 #tab1 上。但是,Page1 上菜单容器中指向#tab1 的超链接确实有效。两个超链接都使用相同的 a href="#tab1" 但无论出于何种原因,只有在 Page1.html#tab2 内容之外的链接在链接到 Page1.html#tab1 时才有效。菜单容器中的超链接始终有效。
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,但 URL 将保持为 Page2.html#tab4。
我想要的是:
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 **:当我直接单击一个选项卡时,选项卡图像“弹出”并且之前选择的选项卡“取消弹出”。当我单击指向选项卡的菜单超链接时,即使显示新选择的选项卡的正确内容,上一个选项卡仍会弹出。或者,如果使用菜单链接前往新页面上的选项卡,则不会“弹出”选项卡,但会显示正确的选项卡内容。我认为解决上述问题也将解决这个问题。
这是我的代码:
<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>
无论如何,我是一个大菜鸟,所以你提供的代码越好,我就越容易批准你的答案是正确的。:)
谢谢!