0

我正在使用多个页面,每个页面都有 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>

无论如何,我是一个大菜鸟,所以你提供的代码越好,我就越容易批准你的答案是正确的。:)

谢谢!

4

1 回答 1

0

您需要使您的锚标签可散列,也就是说,使它们对前端用户“可收藏”。您似乎正在创建自己的选项卡插件,但 jQuery UI 将为您完成散列部分。正如您所提到的,这是一个演示设置选项卡:

http://muledesign.com/2009/05/bookmarkable-tabs-with-jquery-ui/

演示:

这是演示页面-> http://muledesign.com/demo/tabs/default-tabs.html

带有指向选项卡的可散列链接的演示页面 - > http://muledesign.com/demo/tabs/default-tabs.html#movie

回复:C点)-尝试使用灯箱插件并将灯箱插件打开/初始化功能附加到UI选项卡上的激活事件-> http://api.jqueryui.com/tabs/#event-activate

感谢您可能不想使用插件,但您已经在使用 jquery 了。

于 2013-01-09T13:33:32.723 回答