如何使選定的導航按鈕保持活動狀態

Question

我創建了一些JavaScript，試圖保持導航按鈕處於活動狀態。 我意識到這已經被問過幾次了，但是我認為我的代碼是相當基本的，如果可能的話，我正在努力使其正常工作。 我的HTML看起來像這樣：

<nav>
<ul class ="nav"> <!-- Niall Added-->

  <li id='active1' onclick = "doClick(1)"><%= link_to "HOME",   '/' %></li>
  <li id='active2' onclick = "doClick(2)"><%= link_to "MATCHES",   matches_path %></li>
  <li id='active3' onclick = "doClick(3)"><%= link_to "CAR POOLING",   car_pooling_path %></li>
  <li id='active4' onclick = "doClick(4)"><%= link_to "STATISTICS",   statistics_path %></li>
  <li id='active5' onclick = "doClick(5)"><%= link_to "MENTORS AREA", mentors_area_path %></li>
</ul>
</nav>

和我的JavaScript看起來像這樣：

function doClick(x) {

if ( x == 1) {
     document.getElementById("active1").style.backgroundColor = '#99C262';

 }

 else if (x == 2) {

   document.getElementById('active2').style.backgroundColor = '#99C262';
 }

   else if (x == 3) {

   document.getElementById('active3').style.backgroundColor = '#99C262';
 } 

   else if (x == 4) {

   document.getElementById('active4').style.backgroundColor = '#99C262';
 } 

 else if (x == 5) {

   document.getElementById('active5').style.backgroundColor = '#99C262';
 } 

}

但是，單擊按鈕實際上並沒有改變顏色。

有什么建議嗎？

Answer 1

我嘗試了您的代碼，它可以正常工作。 但我建議使用jQuery更簡單，更干燥的解決方案：

HTML：

<nav>
        <ul class ="nav"> <!-- Niall Added-->
          <li class="element">Home0</li>
          <li class="element">Home1</li>
          <li class="element">Home2</li>
          <li class="element"">Home3</li>
          <li class="element">Home4</li>
        </ul>
    </nav>

CSS：

.element.active {
        background: #99C262;
    }

JS：

$(function() {
        $(".element").click(function() {
            $(this).toggleClass("active");
        });
    });

Answer 2

這取決於您要如何解決。

我會從不需要的lis中刪除id，這樣可以使事情變得更加簡單。

我已將一個ID添加到導航中，並從lis中刪除了該ID。

<nav>
<ul id="nav"> <!-- Niall Added-->
  <li><%= link_to "HOME",   '/' %></li>
  <li><%= link_to "MATCHES",   matches_path %></li>
  <li><%= link_to "CAR POOLING",   car_pooling_path %></li>
  <li><%= link_to "STATISTICS",   statistics_path %></li>
  <li><%= link_to "MENTORS AREA", mentors_area_path %></li>
</ul>
</nav>

我使用循環查看導航的所有子元素並應用事件，這使您的HTML保持整潔。

我正在使用該功能清除所有孩子的顏色，然后將顏色重新應用於我單擊的項目。

(function() {

    var nav = document.getElementById('nav');

    function handleClick(e) {

        for(var i = 0; i < nav.children.length; i++) {
            nav.children[i].style.background = 'transparent';
        }
       e.target.style.background = 'red'; 
    }

    for(var i = 0; i < nav.children.length; i++) {
        nav.children[i].addEventListener('click', handleClick);
    }

})();

在此處查看演示： http : //codepen.io/DanielTate/pen/KVPoYa

顯然，如果您要離開該頁面，則需要以其他方式處理此問題，可能會查看URL。

Answer 3

我認為您必須確保代碼可以在文檔上運行。 在這里使用jQuery查看我的示例

.active {
  background-color: #99C262;
}

<nav>
<ul class ="nav"> 
  <li class="active">One</li>
  <li>Two</li>
  <li>Three</li>
  <li>four</li>
  <li>five</li>
</ul>
</nav>

$(function() {
  var all = $('ul li');

  all.on('click', function() {
    //clear
    all.removeClass('active');
    //set only this
    $(this).addClass('active');
  });

});

使用jQuery的例子

Answer 4

設法使其工作：

CSS

   nav ul li a:hover {
   background-color: #080808;
   color: #ffbd10;
   transition: 0.5s;
   }

   nav ul li a.active{
   background-color:#080808;
   }

HTML：

 <nav>
 <ul class ="nav"> <!-- Niall Added-->
 <li class="tab"><%= link_to "HOME",   '/' %></li>
 <li class="tab"><%= link_to "MATCHES",   matches_path %></li>
 <li class="tab"><%= link_to "CAR POOLING",   carpools_path %></li>
 <li class="tab"><%= link_to "STATISTICS",   statistics_path %></li>
 <li class="tab"><%= link_to "MENTORS AREA", mentors_area_path %></li>
 </ul>
 <div class="clearfix"></div>
 </nav>

JS：

function tab_active() {
        var tabIndex = 0;
var url = location.href.toLowerCase();

if (url.indexOf("matches") > -1) {
    tabIndex = 1;
} else if (url.indexOf("carpools") > -1) {
    tabIndex = 2;
} else if (url.indexOf("statistics") > -1) {
    tabIndex = 3;
} else if (url.indexOf("mentors_area") > -1 || url.indexOf("opponents") > -1) {
    tabIndex = 4;
}

// Code using $ as usual goes here.
var $tabLinks = $(".nav .tab a");
$tabLinks.removeClass("active").eq(tabIndex).addClass("active");

$tabLinks.on("mouseover", function() {
    $tabLinks.eq(tabIndex).removeClass("active");
});
$tabLinks.on("mouseout", function() {
    $tabLinks.eq(tabIndex).addClass("active");
});
}