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

Question

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

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） **额外积分**：当我直接单击某个选项卡时，选项卡图像“弹出”，而之前选择的选项卡“未弹出”。当我单击指向某个选项卡的菜单超链接时，上一个选项卡仍然会弹出，即使新选择的选项卡显示了正确的内容。或者，如果使用菜单链接访问新页面上的选项卡，则不会“弹出”选项卡，但会显示正确的选项卡内容。我认为解决上述问题也能解决这个问题。

这是我的密码：

<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

您需要使锚点标记可散列，也就是说，使前端用户可以将它们设置为“可书签”。您似乎正在创建自己的选项卡插件，但jQueryUI将为您完成散列部分。下面是一个演示设置选项卡，如您所述：

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

演示：

这是演示页-

带有可哈希链接到选项卡的演示页面-

Re：点C）-尝试使用一个Lightbox插件，并将Lightbox插件打开/初始化函数附加到用户界面选项卡上的激活事件-

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