Question

我有一个菜单：

 <ul>
    <li id="active"><a href="/">Головна</a></li>
     <li><a href="/about/">Про компанію</a></li>
     <li><a href="/work/">Діяльність</a></li>
     <li><a href="/initiative/">Ініціативи</a></li>
     <li><a href="/statti/">Статті</a></li>
 </ul>

您能否建议一种方法来更改此列表的id = active属性。例如，如果我点击about，我希望将此li元素标记为活动。

由于

Answer 1

使用class，而不是id。原因是id用于标识元素，在这种情况下，即使您有其他需要“活动”区别的上下文，“活动”标识的页面中唯一的元素就是这个元素。使用class可以让你在不同的上下文中有几个“活动”元素，并且在语义上更正确。

Answer 2

有an elegant css method样式化当前活动的导航状态，没有任何javascript或服务器端支持。基本上，唯一标识导航状态的一个id（例如，作为body id属性）足以创建突出显示活动状态的css选择器。

Answer 3

如果你的菜单有一个id，让我们说“xpto”，每个链接的onclick可以触发这样的函数：

onclick="setActiveId(this);"


functionSetActiveId(newActiveElem){
  var allElems = document.getElementById('xpto').childNodes;

  for(var i = 0; i < allElems.length; i++){
    allElems[i].id = '';
  }

  newActiveElem.id = 'active';
}

Answer 4

要正确，您应该使用class而不是id来执行此操作。（有关详细说明，请参阅http://css-discuss.incutio.com/?page=ClassesVsIds。基本上，ID应该是页面唯一的。）

您可以使用jQuery的内置属性修改功能修改类： http://docs.jquery.com/Attributes

查看“班级”

JS：在菜单中指定当前元素

4 个答案: