Question

我一直在为此尝试多种解决方案，但我无法让它发挥作用。

我目前正在使用Coda类型的滑块使用以下导航在我的网站上传播内容：

            <div class="navigation">
                <ul>
                    <li id="home"><a href="#home">Home</a></li>
                    <li id="work"><a href="#work-showcase">Work Showcase</a></li>
                    <li id="offerings"><a href="#brand-offerings">Offerings</a></li>
                    <li id="about"><a href="#about">About</a></li>
                    <li id="reason"><a href="#wow-factor">Reason to Believe</a></li>
                </ul>   
            </div>

我的网站上有几页不属于滑块内容的页面。我希望能够在其中一个“非滑块”页面上 - 能够点击顶部的滑块选项之一 - 并将该内容幻灯片的导航选项用.active突出显示我的情况是“.there”类。

例如 - 如果我在 - /packaged-brand-solutions.php（非滑块），我点击：工作展示（/index.php#work-showcase） - 不仅是那个区域滑块加载 - 但其随附的导航选项会突出显示。

任何帮助都将不胜感激。

Answer 1

如果我的问题是对的，那么这些方面的内容应该对你有用：

$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $(document.location.hash).addClass('there');
});

这假设您的<li>需要获得.there课程。如果您希望<a>获取它，请改用：

$(window).bind('hashchange', function(){
    $('.there').removeClass('there'); // reset the previously active nav item
    $('a', document.location.hash).addClass('there');
});

修改

我刚刚意识到您的链接哈希值不一定与您的<li>元素ID匹配。以下是此方案的适当解决方案：

// assuming that you want the <a> to get the .there class $(window).bind('hashchange', function(){ $('.there').removeClass('there'); // reset the previously active nav item $('a[href="' + document.location.hash + '"]').addClass('there'); }); // assuming that you want the <li> to get the .there class $(window).bind('hashchange', function(){ $('.there').removeClass('there'); // reset the previously active nav item $('a[href="' + document.location.hash + '"]').closest('li').addClass('there'); });

您可能需要考虑重命名ID;）

编辑2，好奇：

我最初写过这样的选择器，这显然是愚蠢的：

$('#' + document.location.hash.replace('#',''))

编辑3：迈克尔，我无法理解上述原因无法解决的原因 - 您可能想尝试这种方法，但是：

$('#navigation a').click(function(){ $('.there').removeClass('there'); $(this).addClass('there'); });

使用jQuery突出显示导航中的活动类

1 个答案: