3

在网站的#page1 上时，我希望#page1 的菜单项像当前页面样式一样突出显示。我试过添加一个类并直接使用下面的代码应用 css，但都不起作用。

谁能告诉我我做错了什么？提前致谢。

var url = window.location.href;
if (url.search("#page1") > 0) {
$("#mainNav ul li a.scroll1").addClass("current");
$("#mainNav ul li a.scroll1").css("color","#000");
}
4

2 回答 2

2

听起来您应该能够搜索window.location.hash并将其用作选择器。例如，如果您在 上http://localhost/index.php#page1，则从窗口对象返回的哈希值将是#page1。您可以使用它来查找您的元素：

// Reference to hash, or empty string
var page = window.location.hash;

// If the resulting string isn't empty
if ( page.length ) {
    // Target the corresponding element, add a class
    $( "a." + page.slice(1).replace(/page/,'scroll') ).addClass( "selected" );
}
于 2012-10-24T03:55:59.017 回答
0

在这个问题之后，我为这个问题制定了一个非常简单的解决方案。以下代码在单击时在 LI 上创建一个 Current Page 类，并同时从其他 Menu LI 中删除所有其他当前页面类。

HTML

<ul>
<li class="scrollButton1 current"><a href="#page1">Welcome</a></li>
<li class="scrollButton2"><a href="#page2">Education</a></li>
<li class="scrollButton3"><a href="#page3">Triathlon</a></li>
<li class="scrollButton4"><a href="#page4">Register</a></li>
</ul>

查询

$(document).ready(function(){
$('.scrollButton1').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton1').addClass('current');});
$('.scrollButton2').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton2').addClass('current');});
$('.scrollButton3').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton3').addClass('current');});
$('.scrollButton4').click(function(){$('html, body').removeClass('current'), $('#mainNav ul li.scrollButton4').addClass('current');});
});

希望这可以帮助。

于 2012-11-30T05:08:35.240 回答