Question

我想要更改特定<li></li>元素的类，我找到了一些方法，但是没有它们有效，请告诉我代码无效的原因＆gt; < / p>

<script type="text/javascript">
        $('.header a[href="register_friend.php"]').parent().setAttribute("class", "active");
    </script>

<header class="header" >
    <nav><ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="register_friend.php">Register a friend</a></li>
            <li><a href="">Register Yourself</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="index.html">Rate</a></li>
        </ul>
    </nav>
</header>

我想补充说我正在使用外部标头，如果这会带来任何变化。

<body >
<div id="header"></div>

</body>

Answer 1

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    $('.header a[href="register_friend.php"]').parent().addClass("active");
  });
</script>

在API文档https://api.jquery.com/addClass/

中查找addClass

https://codepen.io/codingonHP/pen/OggeJb

wrt to addEventListner： https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded和IE： addEventListener not working in IE8

Answer 2

尝试以这种方式包装脚本：

$(document).ready(function(){
     // Note:jquery use 'attr', instead of 'setAttribute' to set attribute.
    $('.header a[href="register_friend"]').parent().attr("class", "active");
})

Answer 3

您需要自己获取DOM节点，因此可以使用本机setAttribute，或者在jQuery对象上使用jQuery .attr()。这些中的任何一个都可以工作（假设在脚本运行时存在DOM节点 - 如果需要的话，请执行常规document.ready舞蹈。）

// use the DOM node:
$('.header a[href="register_friend.php"]').parent()[0].setAttribute("class", "active");

// or use the jQuery object:
$('.header a[href="register_friend.php"]').parent().attr("class", "active");

.active {
  border: 1px solid #F00
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="register_friend.php">Register a friend</a></li>
      <li><a href="">Register Yourself</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="index.html">Rate</a></li>
    </ul>
  </nav>
</header>

如果您知道只有一个匹配元素，那么这些方法是等效的。如果您需要能够处理多个匹配元素，请使用jQuery .attr()方法，该方法将应用于集合中的所有节点。

（...但话虽如此，.addClass()可能比直接用.attr()或.setAttribute()设置类更安全，因为后两者将覆盖任何其他类名目前在元素上。）

Answer 4

首先，您应该使用vendor/ratchet，而不是设置属性。

除此之外，如果你希望在页面加载时发生这种情况，你应该将jQuery函数包装到addClass中：

$(document).ready(function() { ... })

$(document).ready(function() {
        $('.header a[href="register_friend.php"]').parent().addClass("active");
});

.active {
border: 1px solid red;
}

我想改变一个特定元素的类，你能不能告诉我为什么我的代码不起作用？

4 个答案: