javascript - 单击重复菜单更改类名

Question

这是 fiddle

我正在尝试实现一些非常简单的事情，当单击一个列出的元素时，必须向其添加一个新类，有两个相同的菜单，即使单击发生在单个菜单中，也需要在两个菜单中更改类菜单。

在 fiddle 中，#e8e8e8 颜色被添加到具有类“zm-active”的任何列出的元素，目前它在主页上并且适用于单个菜单，我希望它在两个菜单上工作，即使单击发生在单个菜单上。

代码:

JS:

$(document).ready(function() {
$('.zetta-menu li').on('click', changeClass);
});

function changeClass() {
   $('.zetta-menu li').removeClass('zm-active');
    $(this).addClass('zm-active');
}

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 不是很了解，如有任何帮助，我们将不胜感激。

Answer 1

这些链接有什么共同点吗？你的! 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');
    });
});

JS Fiddle demo