处理 jQuery 菜单的方法包括在多个页面上答案

【问题标题】：Ways to deal with jQuery menu includes on multiple pages处理 jQuery 菜单的方法包括在多个页面上
【发布时间】：2010-07-31 23:29:17
【问题描述】：

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

这里是网站testsite

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

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

我的想法

使用查询字符串告诉导航栏脚本查看器位于哪个部分
在小节页面中使用某种 JavaScript（即：mastersuite.html 或 bathrooms.html）告诉导航栏脚本用户在哪个页面上李>

【问题讨论】：

标签： jquery navigation query-string ssi

【解决方案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

【讨论】：

@Gert - 如果您的意思是页面不会更改，但内容会动态加载，那是个好主意。唯一的问题可能是您是否希望您的页面可以被搜索引擎抓取。不会看到任何动态加载的内容。
@patrick - 关于网络爬虫的非常好的观点。我想单页解决方案可能只对应用程序有用，而不是站点。 :) 我已经删除了我的建议。
@Gert - 一切都取决于。对于特定站点来说可能没什么大不了的。有人在此处发布了一份来自 Google 的关于使 AJAX 网站可抓取的文档。我还没来得及读它。我得继续努力。 :o) code.google.com/web/ajaxcrawling
@patrick - 这将是一个好主意，但由于 Google 只是众多搜索引擎之一，因此最好继续增加这些页面。 ;)
@Gert - 还有其他搜索引擎吗？ ;o)

【解决方案2】：

好的，这就是我所做的，看起来是一个不错的解决方案。

在部分页面上（即：浴室.shtml 或 mastersuite.shtml）我使用了这个

<script type="text/javascript">

var section='1';

</script>

“section”的值是页面所在的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);
});
}

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

【讨论】：