Question

当我点击列出的项目时，我想要实现一些非常简单的东西，必须添加一个新类，有两个相同的菜单，即使点击发生在单个菜单中，也需要更改类别菜单。

在小提琴＃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

单击以更改重复菜单时更改类名称

1 个答案: