Question

我这里有JavaScript代码来检测URL中的#，然后在检测到时将元素添加到元素中。然而，在使用nth-child选择器的三个案例中，没有发生任何事情，我不确定原因。

switch (window.location.hash) {
    case "#MAIN":
        $('#tab li a.nav:first').addClass('act').siblings().addClass('inact');
        break;
    case "#sg2":
        $('#tab li a.nav:nth-child(2)').addClass('act').siblings().addClass('inact');
        alert($('#tab li a.nav:nth-child(2)').className);
        break;
    case "#sg3":
        $('#tab li a.nav:nth-child(3)').addClass('act').siblings().addClass('inact');
        break;
    case "#zycsg":
        $('#tab li a.nav:nth-child(4)').addClass('act').siblings().addClass('inact');
        break;
    default:
        $('#tab li a.nav:first').addClass('act').siblings().addClass('inact');
}

如何解决此问题？

HTML

<div id="tab">
    <ul>
        <li class="menuItem2"><a href="#MAIN" class="nav" onclick='window.history.pushState("", "", "/#MAIN");'>Home-1</a></li>
        <li class="menuItem2"><a href="#sg2" class="nav" onclick='window.history.pushState("", "", "/#sg2");'>HDCYG?</a></li>
        <li class="menuItem2"><a href="#sg3" class="nav" onclick='window.history.pushState("", "", "/#sg3");'>Home-3</a></li>
        <li class="menuItem2"><a href="#zycsg" class="nav" onclick='window.history.pushState("", "", "/#zycsg");' style="width:300px;">Zinteen youtube collection</a></li>
    </ul>
</div>

Answer 1

你的选择器错了，它应该是

$('#tab a.nav:nth-child(n)')

或

$('#tab li:nth-child(n) a.nav')

你现在所拥有的是在#tab

下寻找每个李的第n个儿童锚

Answer 2

我意识到这已经关闭，但是将href用作选择器会不会更容易？

//get the hash
//find the anchor tag with the matching href and add the act class
//select all of the anchor tags with the nav class but not the nav and act class

var page = window.location.hash;
$('a.nav[href="'+page+'"]').addClass('act');
$('a.nav:not(.act)').addClass('inact');

jQuery nth-child选择器不使用jQuery

HTML

2 个答案: