Question

我在HTML中有一个简单的菜单：

<ul id="menu">
    <li><a id="admin" onclick="changeActive('admin');" class="active a red">Admin</a></li>
    <li><a id="dash" onclick="changeActive('dash');" class="a black">Dash</a></li>
    <li><a id="notifs" onclick="changeActive('notifs');" class="a black">Notifs</a></li>
</ul>

我们的想法是动态更改有效元素。

我目前的职能是：

function changeActive(id)
    {
      document.getElementById(id).className += "active a red";
      var c = document.querySelectorAll("ul a");
      for (i in c)
      {
        fav = c[i].attributes[0];
        if(fav.value!=id)
          {
            console.log(fav.value);
            document.getElementById(fav.value).className += "a black";
          }
      }
    }

对此有更有效的解决方案吗？谢谢！

Answer 1

注意我删除了+=，因此您不必每次都添加相同的课程。

function changeActive(id) {
      var c = document.querySelectorAll("ul a");
      var i;
      for (i in c) {
        c[i].className = 'a black';
      }
      //update it at last
      document.getElementById(id).className = "active a red";
}

Answer 2

使用classList属性及其add方法。 remove将删除该课程

  document.getElementById(id).classList.add("active a red");

Answer 3

使用navmenus，您需要在li上设置活动状态，并将样式应用于活动li中的a。

以下内容包含li中的id，活动类和onclick处理程序（以及a中的假href）以及用于从点击的所有li中删除活动类的功能，然后将它应用于选定的li。然后.active类CSS将a着色为红色。

＆＃13;

function changeActive(option){
  var option = option;
  var li = document.getElementsByTagName("li");
  for(i=0;i<li.length;i++){
     li[i].classList.remove("active");
  }
  document.getElementById(option).classList.add("active");
}

＆＃13;

ul{list-style:none}
a{color:black;text-decoration:none}
.active a{color:red}

＆＃13;

<ul id="menu">
    <li class="active" onclick="changeActive('admin')" id="admin"><a  href="#">Admin</a></li>
    <li onclick="changeActive('dash')" id="dash"><a href="#">Dash</a></li>
    <li onclick="changeActive('notifs')" id="notifs"><a href="#">Notifs</a></li>
</ul>

＆＃13;

Answer 4

如果＆＃34;高效＆＃34;意味着浏览器的工作量最少，那么以下内容可能符合条件。它没有循环和3行代码。

您似乎想要更改单击的元素并将其从具有该类的任何其他元素中删除。如果您从点击监听器传递 this ，则不需要 getElementById 。如果使用 addEventListener 添加侦听器，则将此设置为元素，因此您不必通过它。

如果你使用 querySelector ，你可以直接找到已经拥有特定类的元素：

＆＃13;

function changeActive(evt) {
  // Get the current "active" element
  var active = document.querySelector('.active.a.red');
  // Make it not active
  active.className = 'a black';
  // Set the clicked on element to active
  this.className = 'active a red';
}

// Add listeners when the load event occurs
window.onload = function(){
  Array.prototype.forEach.call(document.querySelectorAll('#menu a'), function(a) {
    a.addEventListener('click', changeActive,false);
    console.log(a.attributes[1].value)
  });
};

＆＃13;

.active {
  color: red;
}

＆＃13;

<ul id="menu">
    <li><a id="admin" class="active a red">Admin</a></li>
    <li><a id="dash" class="a black">Dash</a></li>
    <li><a id="notifs" class="a black">Notifs</a></li>
</ul>

＆＃13;

我认为在主机对象上使用 for..in 是明智的，在那里你真的不知道自己要去哪里得到。假设第一个属性是id也不是一个好主意。如果您需要id，请使用 id 属性直接获取。

Answer 5

请检查以下代码，
HTML：

<ul id="menu">
    <li><a class="active a red">Admin</a></li>
    <li><a class="a black">Dash</a></li>
    <li><a class="a black">Notifs</a></li>
</ul>

jQuery的：

$( document ).ready(function() {
    $('#menu li a').on('click', function() {
        $('#menu li a').removeClass().addClass( "a black" );
        $(this).removeClass().addClass( "active a red" );
    });
});

减少了HTML代码，减少了JS代码，没有循环，没有对元素的ID引用，易于理解。 jQuery元素引用与CSS相同。

注意：请不要忘记添加jQuery库。

动态更改JavaScript

5 个答案: