JS関数を使用してリストのクラスを動的に変更する方法

Question

ユーザのクリックに応じて動的にリスト項目のクラスを変更したいと考えています。私は、メニューを持っていると私は、ユーザーと最初にホームメニューでクリックするだけで、そのメニューに.activeクラスを割り当てたいアクティブにする必要があり

ここに私のコードでは、CSSで

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>

ですliを使用してファイルアクティブなクラスを使用して選択したページメニューを強調表示します

Answer 1

、私はあなたのコードに問題にあなたを指すようにしたいです。

問題は、activeclassという不明なパラメータをidという関数に渡すことです。

あなたのコードをデバッグするときは、id paramは空であることがわかります。

あなたは、関連する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キーワードをコードから削除してください。これは、jQueryのせずにJavaScriptで作業例

ではありません。

[].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を追加する必要がありますクリックしたアイテム。

はjqueryのライブラリを含めるのを忘れないでください。この

<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のを使用していない

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"); 
     } 
    } 

：JavaScriptを使用して

Answer 3

は、あなたは以下のコードを使用することができます。これがあなたを助けることを願っていますHTMLにclickイベントを追加する必要はありません。ただ、HTML以下に十分である：（@Jitendra Tiwariさんの答えまたは下記の私の例のように）あなたが望むものを達成するためのより良い方法がありますが

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