Question

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

我想要的：

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>

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

谢谢！

Answer 1

您需要将锚标记设置为哈希，即使其为前端用户设置为“可收藏”。您似乎正在创建自己的选项卡插件，但jQuery UI将为您执行散列部分。如上所述，这是一个演示设置选项卡：

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

<强>样本：

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

包含指向标签的哈希链接的演示页 - ＆gt; http://muledesign.com/demo/tabs/default-tabs.html#movie

Re：C） - 尝试使用灯箱插件并将灯箱插件open / init功能附加到UI标签上的激活事件 - ＆gt; http://api.jqueryui.com/tabs/#event-activate

我很感激你可能不想使用插件，但是你已经在使用jquery了。呵呵。

JQuery选项卡和超链接（请帮我修改我的代码）

1 个答案: