Question

在网站的＃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");
}

Answer 1

听起来你应该能够搜索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" );
}

Answer 2

在这个问题之后，我找到了一个非常简单的解决方案。下面的代码在单击时在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>

JQUERY

$(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');});
});

希望这有帮助。

Jquery - 如何找到#tag的名称并应用一个类

2 个答案: