javascript - 在事件菜单中锚定菜单不同的 css

Question

我有一个单页网站，其中 1 个始终位于带有 anchor 链接的顶部菜单。我想在菜单处于事件状态时更改菜单的颜色。我不知道如何在我传递的 anchor 链接或其他东西上获得哪个菜单处于事件状态。

这是我所拥有的:

<div id="menu" class="default">
    <img align="left" width="8%" height="100%"src="<?php bloginfo('template_directory'); ?>/pics/a.jpeg"/>
    <nav>
        <ul>
            <li><a class="active" href="#menu1">menu1</a></li>
            <li><a class="inactive" href="#menu2">menu2</a></li>
            <li><a class="inactive"  href="#menu3">menu3</a></li>
            <li><a class="inactive"  href="#menu4">menu4</a></li>
        </ul>
    </nav>
</div><!-- close menu -->

#inactive {
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#active {
    color: #deb48f;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

颜色改变了。我需要一个 javascript 来根据现在屏幕上的菜单更改这些菜单的类。

Answer 1

一个简单的方法是使用 bootstrap 和 scrollspy 插件，如果你愿意将 bootstrap 添加到你的网站。
http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

此外，作为旁注，我将通过向导航标签添加 id="tabs"并将 css 更改为

来消除对非事件类的需求

#tabs a{
    color: #fff;
    text-decoration: none;
    padding: 3px 7px;
    text-transform: uppercase;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#tabs a.active{
    color: #deb48f;
}

注意#表示标签的id，句点表示标签的css。

这是我在 StackOverflow 上的第一篇文章，所以我希望我做对了并且对您有所帮助!

编辑:
您可以在 div 之后添加一些 jQuery，这样您至少可以在单击选项卡时更改选项卡的颜色:

<script>
    $('li > a').click(function() {
        $('li > a').removeClass();
        $(this).addClass('active');
    })
</script>