首页 文章

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

提问于
浏览
0

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

What I Want:

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 :当我直接单击选项卡时,选项卡图像"pops" out和先前选择的选项卡"unpops" . 当我单击菜单超链接到选项卡时,即使显示新选择的选项卡的正确内容,前一个选项卡仍会弹出 . 或者,如果使用菜单链接前往新页面上的选项卡,则不显示选项卡,但会显示正确的选项卡内容 . 我认为解决上述问题也可以解决这个问题 .

这是我的代码:

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

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

谢谢!

1 回答

相关问题