Javascript 单击更改类名以获得重复菜单

这是我的建议

我试图实现一个非常简单的东西，当一个列出的项目被点击时，一个新的类必须被添加到它，有两个相同的菜单，类的变化需要发生在两个菜单中，即使点击发生在单个菜单中

在fiddle中，e8e8e8颜色被添加到“zm激活”类的任何列出的项目中，当前它在主菜单上，适用于单个菜单，我希望它可以同时适用于两个菜单，即使单击单个菜单

代码：

JS:

HTML:

<nav id="fixedbar">
     <ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
            <li class="zm-active zm-content-full">
                <a href="#header-single-1">
                    Home
                </a>
            </li>
            <li>
                <a href="#about-10">
                    About
                </a>
            </li>
            <li>
                <a href="#services-18">
                    Services
                </a>
            </li>
            <li>
                <a href="#portfolio-19">
                    Portfolio
                </a>
            </li>
            <li>
                <a href="#team-19">
                    Team
                </a>
            </li>
            <li>
                <a href="#pricing-17">
                    Pricing
                </a>
            </li>
            <li>
                <a href="#blog-19">
                    Blog
                </a>
            </li>
            <li>
                <a href="#contact-1">
                    Contact
                </a>
            </li>
        </ul><!-- /.zetta-menu -->
</nav><!-- /#fixedbar -->
<nav class="navbar navbar-single-1 center" role="navigation">
    <div class="navbar-inner center">
        <ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
            <li class="zm-active zm-content-full">
                <a href="#header-single-1">
                    Home
                </a>
            </li>
            <li>
                <a href="#about-10">
                    About
                </a>
            </li>
            <li>
                <a href="#services-18">
                    Services
                </a>
            </li>
            <li>
                <a href="#portfolio-19">
                    Portfolio
                </a>
            </li>
            <li>
                <a href="#team-19">
                    Team
                </a>
            </li>
            <li>
                <a href="#pricing-17">
                    Pricing
                </a>
            </li>
            <li>
                <a href="#blog-19">
                    Blog
                </a>
            </li>
            <li>
                <a href="#contact-1">
                    Contact
                </a>
            </li>
        </ul><!-- /.zetta-menu -->
    </div><!-- /.navbar-inner -->
</nav><!-- /.navbar-single-1 -->

---

我对javascript/jquery不是很熟悉，如果有任何帮助，我将不胜感激

这些链接有什么共同点吗？当然是你！href属性（至少在您的示例中）

因此，您获取所单击链接的href属性，通过该属性值获取具有相同href的所有链接，然后获取它们的父链接（LI），以便向它们添加类

$(document).ready(function() {

    $('.zetta-menu li a').click(function () {
         var itemsToChange = $('li a[href="'+$(this).attr('href')+'"]').parent(),
             allItems = $('.zetta-menu li');

        allItems.removeClass('zm-active');        

        itemsToChange.addClass('zm-active');
    });
});

$(document).ready(function() {

    $('.zetta-menu li a').click(function () {
         var itemsToChange = $('li a[href="'+$(this).attr('href')+'"]').parent(),
             allItems = $('.zetta-menu li');

        allItems.removeClass('zm-active');        

        itemsToChange.addClass('zm-active');
    });
});