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

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

1） 在选项卡内容中，Page1.html#tab2有一个指向Page1.html#tab1的超链接。链接不起作用-单击链接时，页面仅停留在#tab1上。但是，第1页菜单容器中指向#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>

$（文档）.ready（函数（）{
var tabId=location.hash；
if（tabId）{
$（tabId.show（）；
}
$（函数（）{
$（'a[href^=“#“]”）。单击（函数（e）{
e、 预防默认值（）；
$（'html，body'）.scrollTop（$（this.hash.offset（）.top-50）；
});
});
});
$（文档）.ready（函数（）{
var tabContents=$（“.tab_content”）.hide（），
tabs=$（“ul.tabs li，.rgtPanelBox ul li”）；//第二个选择器与左侧边栏匹配
var tabId=location.hash；
if（tabId）{
$（tabId.show（）；
}
否则{
tabs.first（）.addClass（“活动”）.show（）；
tabContents.first（）.show（）；
}
选项卡。单击（函数（）{
变量$this=$（this），
activeTab=$this.find（'a'）.attr（'href'）；
if（！$this.hasClass（'active'）&&activeTab.length>1&&activeTab.indexOf（'#'））==0）{
$this.addClass（'active'）.sides（）.removeClass（'active'）；
tabContents.hide（）.filter（activeTab.fadeIn（）；
}
返回；
});
});

不管怎么说，我是个大傻瓜，所以你提供的代码越好，我就越容易认可你的答案是正确的。：）

---

谢谢

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

演示：

这是演示页面->

演示页面，可哈希链接至选项卡->

回复：C点）-尝试使用lightbox插件，并将lightbox插件打开/初始化功能附加到UI选项卡上的激活事件->

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