如何使用JavaScript代码在活动li上添加类

时间:2016-03-27 18:19:15

标签: javascript

use Symfony\Bridge\Doctrine\Form\Type\EntityType;

如何使用JavaScript在li标签上添加活动类。在这里,我试着去做。它工作但不正常。我在这里做标签。

2 个答案:

答案 0 :(得分:2)

根据评论,我猜你期待这个:

var a = document.querySelectorAll(".nav li a");
for (var i = 0, length = a.length; i < length; i++) {
  a[i].onclick = function() {
    var b = document.querySelector(".nav li.active");
    if (b) b.classList.remove("active");
    this.parentNode.classList.add('active');
  };
}
.active {
  background-color: #0f9;
}
<ul class="nav nav-tabs">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Menu 1</a>
  </li>
  <li><a href="#">Menu 2</a>
  </li>
  <li><a href="#">Menu 3</a>
  </li>
</ul>

答案 1 :(得分:-1)

如果你有jquery

<ul class="nav nav-tabs">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

<style>
 .active {background-color: #0f9;}
</style>
<script type="text/javascript">
$("ul.nav.nav-tabs").on('click', 'li', function(){
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});
</script>