Question

我正在尝试创建一个菜单系统，我可以在其中更改菜单中活动页面项的样式。我在每个页面上使用一个单独的body类，然后我想循环浏览菜单中的li并找到与body类匹配的内容。在那场比赛中，我将新的样式添加到该菜单项。

到目前为止，这是我的代码。

HTML

<body class="home-state">
...

<div class="menu-left">     
  <ul>
    <li class="home-state">
        <a href="/">Home</a>
    </li>
    <li class="work-state">
        <a href="/work">Work</a>
    </li>
    <li class="services-state">
        <a href="/services">Services</a>
    </li>
    <li class="about-state">
        <a href="/about">About</a>
    </li>
    <li class="blog-state">
        <a href="//blog.example.com" target="_blank">Blog</a>
    </li>
    <li class="shop-state">
        <a href="/shop">Shop</a>
    </li>
    <li class="contact-state">
        <a data-toggle="modal" href="#modal-coworking">Contact</a>
    </li>
    <li class="project-state">
        <a href="/brief/index">Project brief</a>
    </li>
  </ul>
</div>

...
</body>

JS

var bodyClass = $("body").attr('class');

$('.menu-left ul li').each(function(){

首先：我想在这里找到我使用过的$(this).attr("class");元素的类

    var element = $(this);

第二：我想使用if语句检查该类是否与bodyClass匹配

    console.log(element);

上次：如果匹配，我想将类.active添加到元素li。

});

Answer 1

鉴于元素可以有多个类，我建议更改你的body元素以使用data-属性而不是类来指定当前页面的内容：

<body data-current="home-state">

然后JS需要将active类添加到相关的菜单项中很简单：

$("li." + $("body").attr("data-current")).addClass("active")

您不需要循环比较问题中提到的类的菜单项，因为您可以根据其类直接选择所需的li元素。

如果body元素没有data-current属性，则$("body").attr("data-current")会返回undefined，这意味着上面的代码会尝试选择$("li.undefined")元素{1}}并为其添加一个类。可能你没有这样一个类的元素，所以这将是无害的，但如果你想明确测试data-current属性存在：

var current = $("body").attr("data-current")
if (current) {
  $("li." + current).addClass("active")
}

Answer 2

您可以通过几种方式完成此操作，这是执行此操作的简单方法;

var bodyClass = $("body").attr('class');

$("li." + bodyClass).addClass("active")

你也可以使用这个循环;

var bodyClass = $("body").attr('class');

$(".menu-left li").each(function(i, classes) {
    if (bodyClass === $(this).attr("class")) {
        $(this).addClass("active")
    }
})

两人都可以胜任。

Answer 3

enter image description here

正如评论所说，该元素可以有多个类，所以你应该逐个检查它

Answer 4

您错过了绑定菜单项的click事件。如下所示

var bodyClass = $("body").attr('class');
$('.menu-left ul li').on( "click", function() {
var myClass = $(this).attr("class");
   alert(myClass);
});

经过测试：https://codepen.io/anon/pen/XzYjGY

如何在每个循环中找到元素类

4 个答案: