处理 jQuery 菜单包含在多个页面上的方法

Question

这不是一个具体的代码问题，而更多的是一个概念问题。我正在尝试找出解决这个问题的方向。

这是网站 testsite

现在，当您将鼠标悬停在内部上时然后单击Mastersuite，它会将您带到主套件的页面，其中包括通过 SSI 的导航栏，但是当页面加载时，导航菜单会重置，就像您第一次加载索引时一样。我想让菜单加载到单击链接时的状态。我还希望所有页面上的导航栏都只有一个 HTML 文件。

最通用、最干净且可更新的方法是什么？

我的想法

• 是使用查询字符串来告诉导航栏脚本查看者正在
• 使用该小节页面中的某种 JavaScript（即：mastersuite.html 或 bathrooms.html）告诉导航栏脚本用户所在的页面

Answer 1

一个选项是对于将您带到另一个页面的每个链接，将散列设置为其所属的部分 ID。

<a href="mastersuite.shtml#section1">Master Suite</a>

然后在每个页面上，当页面加载时，获取哈希值，并将其用作选择器来触发显示该类别的事件。

if(window.location.hash)
    $(window.location.hash).mouseover();  // Or mouseenter if that's the event

Answer 2

好吧，这就是我所做的，似乎是一个不错的解决方案。

在部分页面（即： Bathrooms.shtml 或 mastersuite.shtml）上，我使用了此

<script type="text/javascript">

var section='1';

</script>

“section”的值是该页面所在的部分。

然后在我的导航栏脚本中我使用了这个

$(window).load(function() {//functionality
$('#section1').hoverIntent(navSelect('.interior','0px'));
$('#section2').hoverIntent(navSelect('.exterior','100px'));
$('#section3').hoverIntent(navSelect('.view','200px'));

function navSelect(section,selectorPosition){
    var func = function(evt){
        if ( $(section).is(':hidden')){
        $('.subSection').fadeOut(250);
        $(section).delay(250).fadeIn(250);
        $('#selector').animate({"left":selectorPosition},250);
        }
    }
    return { over: func, out: func };
}
});
//----------------------------------------------------------
if(section==0){//index page
$(window).load(function() {

$('.section').mouseover(function(){
$('#nav2').fadeOut(0).animate({"height":"30px"}, 250);      
});
});
}

//----------------------------------------------------------
if(section==1){//section1
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.interior').fadeIn(0);
$('#selector').animate({"left":"0px"},0);
});
}
//----------------------------------------------------------
if(section==2){//section2
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.exterior').fadeIn(0);
$('#selector').animate({"left":"100px"},0);
});
}
//----------------------------------------------------------
if(section==3){//section3
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.view').fadeIn(0);
$('#selector').animate({"left":"200px"},0);
});
}

我喜欢这个因为它不需要查询字符串或锚点，而且它非常简单