如何使用JS函数动态更改列表类

Question

我想根据用户的点击动态更改列表项的类。我有一个菜单，我想将.active类分配给只有用户点击的菜单，并且最初的主菜单必须是活动的

这是我的代码

function activeclass(id)
{
  document.getElementById(id).className += "active";
}

<section id="menu-area">      
  <nav class="navbar navbar-default" role="navigation">  
    <div class="container">
      <div class="navbar-header">
        <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <!-- LOGO -->              
        <!-- TEXT BASED LOGO <a class="navbar-brand" href="index.html">Inventive</a>  -->            
        <!-- IMG BASED LOGO  -->
        <a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a> 
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
          @yield('logo')
          <li id="home"><a href="{{ URL::route('index') }}" onclick="activeclass(id)">Home</a></li>
          <li id="aboutus"><a href="{{ URL::route('aboutus') }}" onclick="activeclass(id)">About Us</a></li>
          <li id="products"><a href="{{ URL::route('products') }}" onclick="activeclass(id)">Products</a></li>
          <li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>           
          <li id="contactus"><a href="{{ URL::route('contactus') }}" onclick="activeclass(id)">Contact</a></li>
        </ul>                     
      </div><!--/.nav-collapse -->
    </div>     
  </nav>
</section>

在CSS文件中，带有li的活动类将用于突出显示所选页面菜单

Answer 1

您需要从其他active class中删除li并添加当前点击的项目。

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){

    $('li').click(function(){

      // Step 1 - remove active class from all `li`
      $('li').removeClass('active');

      // Step 2 - add active class on currently clicked li
      $(this).addClass('active');
    });
});
</script>

不要忘记包含jquery库。

Answer 2

使用Javascript，您可以使用以下代码：

var ul = document.getElementById("top-menu");
    var li = ul.getElementsByTagName("li");

    //Set the Home menu as active for first time
    li[0].classList.add("active");

    //add click event listener for each menu item, and add class active on current clicked menu item.   
    for(var i=0; i<li.length; i++){
        li[i].addEventListener("click", function(){
            removeActiveClass();
            this.classList.add("active");
        });
    }

    //Remove the active class from the menu items
    function removeActiveClass() {
        for(var i=0; i<li.length; i++){
            li[i].classList.remove("active");
        }
    }

我没有使用任何jQuery。希望这对你有所帮助。您不需要在HTML上添加click事件。只需以下HTML即可：

<ul id="top-menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Gallery</li>
<li>Contact</li>
</ul>

Answer 3

虽然有更好的方法来实现你想要的东西（比如@Jitendra Tiwari的答案或我下面的例子），但我想指出你的代码中的问题。

问题是您向函数activeclass传递了一个未知参数：id。

调试代码时，您可以看到id参数为空：

您需要传递一个字符串参数以及相关的id：

function activeclass(id) {
  document.getElementById(id).className += "active";
}

.active {
  background:red;
}

<nav class="navbar navbar-default" role="navigation">  
  <div class="container">
    <div class="navbar-header">
      <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- LOGO -->              
      <!-- TEXT BASED LOGO 
<a class="navbar-brand" href="index.html">Inventive</a>  -->            
      <!-- IMG BASED LOGO  -->
      <a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a> 
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
        @yield('logo')
        <li id="home"><a href="#" onclick="activeclass('home')">Home</a></li>
        <li id="aboutus"><a href="#" onclick="activeclass('aboutus')">About Us</a></li>
        <li id="products"><a href="#" onclick="activeclass('products')">Products</a></li>
        <li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>           
        <li id="contactus"><a href="#" onclick="activeclass('contactus')">Contact</a></li>
      </ul>                     
    </div><!--/.nav-collapse -->
  </div>     
</nav>

http://jsbin.com/dadoqop/edit?html,css,js

此外，请从代码中删除public关键字。它不在javascript中

一个工作示例没有jQuery ：

[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
  elm.addEventListener('click', function() {
    var active = document.querySelector('.active');
    if (active) {
      active.classList.remove('active');
    }
    elm.parentNode.classList.add('active');  
  });
});

.active {
  background:red;  
}

<nav class="navbar navbar-default" role="navigation">  
  <div class="container">
    <div class="navbar-header">
      <!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- LOGO -->              
      <!-- TEXT BASED LOGO 
<a class="navbar-brand" href="index.html">Inventive</a>  -->            
      <!-- IMG BASED LOGO  -->
      <a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a> 
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
        @yield('logo')
        <li id="home"><a href="#">Home</a></li>
        <li id="aboutus"><a href="#">About Us</a></li>
        <li id="products"><a href="#">Products</a></li>
        <li id="gallery"><a href="#">Gallery</a></li>           
        <li id="contactus"><a href="#">Contact</a></li>
      </ul>                     
    </div><!--/.nav-collapse -->
  </div>     
</nav>

Answer 4

尝试这种方法。

<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
    @yield('logo')
    <li id="home"><a href="{{ URL::route('index') }}" class="{{ \Request::route()->getName() == 'index' ? 'active' : '' }}">Home</a></li>
    <li id="aboutus"><a href="{{ URL::route('aboutus') }}" class="{{ \Request::route()->getName() == 'aboutus' ? 'active' : '' }}">About Us</a></li>
    <li id="products"><a href="{{ URL::route('products') }}" class="{{ \Request::route()->getName() == 'products' ? 'active' : '' }}">Products</a></li>
    <li id="gallery"><a href="{{ URL::route('gallery') }}" class="{{ \Request::route()->getName() == 'gallery' ? 'active' : '' }}" >Gallery</a></li>           
    <li id="contactus"><a href="{{ URL::route('contactus') }}" class="{{ \Request::route()->getName() == 'contactus' ? 'active' : '' }}">Contact</a></li>
</ul>