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

问题描述：

我想根据用户的点击动态更改列表项的类。我有一个菜单，我想.active类仅分配给该用户，最初主菜单点击必须有效如何使用JS函数动态地更改列表的类

这里说菜单是我的代码

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将用于突出显示选定的页面菜单

类似'.active {background：red}'？究竟是什么问题？ –

上面是我做的代码...它不工作..我失去了一些东西..不知道什么 – nmajethiya

答

虽然有更好的方法来达到你想要的东西（如@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>

答

您需要从其他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库。

试过上面的代码，但它不工作！ – nmajethiya

答

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

显示TypeError：InspectElement中的ul为空 – nmajethiya

您确定已经为您的ul添加了id“top-menu”吗？ – ShwethaU

答

尝试此方法。

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

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

相关推荐