1

这不是一个特定的代码问题，而是一个概念性问题。我试图找出解决这个问题的方向。

这是站点测试站点

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

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

我的想法

  • 使用查询字符串告诉导航栏脚本查看器在哪个部分
  • 在小节页面中使用某种 JavaScript（即：mastersuite.html或浴室.html ）来告诉导航栏脚本用户在哪个页面上
4

2 回答 2

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
于 2010-07-31T23:36:58.303 回答
0

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

在部分页面（即：浴室.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);
});
}

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

于 2010-08-01T03:24:59.280 回答