jQuery选项卡和超链接（请帮助我修复代码）

Question

我正在使用多个页面，每个页面都有jQuery选项卡。 可以说我有带有＃tab1和＃tab2的Page1.html和带有＃tab3和＃tab4的Page2.html。 我的代码存在以下问题：

1）在选项卡内容中，Page1.html＃tab2具有指向Page1.html＃tab1的超链接。 链接无效-单击链接后，页面仅停留在＃tab1上。 但是，在Page1到＃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）时，URL仅更改。 在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） ** 额外信用 ** ：当我直接单击选项卡时，选项卡图像“弹出”，而先前选择的选项卡“弹出”。 当我单击菜单超链接到标签时，即使显示了新选择的标签的正确内容，上一个标签仍会弹出。 或者，如果使用菜单链接转到新页面上的选项卡，则不会弹出“选项卡”，而是显示正确的选项卡内容。 我认为解决上述问题也可以解决此问题。

这是我的代码：

<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/

演示：

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

演示页面，其中包含指向标签的可哈希链接-> http://muledesign.com/demo/tabs/default-tabs.html#movie

重新：C点） -尝试使用灯箱插件和安装在灯箱插件打开/ init函数的激活事件上UI选项卡- > http://api.jqueryui.com/tabs/#event-activate

非常感谢您可能不想使用插件，但是您已经在使用jquery了。