如何使用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

雖然有更好的方法來達到你想要的東西（如@Jitendra蒂瓦里的答案或低於我的例子），我想向你指出問題在你的代碼。

問題是，你傳遞給功能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 2

您需要從其他li刪除active class並添加currentl y點擊項目。

試試這個

<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 3

使用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上添加點擊事件。就在下面的HTML是不夠的：

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

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>