如何使所选导航按钮保持活动状态

How to make selected nav button stay active

本文关键字：活动状态 按钮 导航 何使所      更新时间：2023-09-26

我创建了一些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';
 }

}

然而，按钮在被点击时实际上并没有改变颜色。

有什么建议吗？

我试过你的代码，它工作正常。但我建议使用jQuery更简单、更干燥的解决方案：

html:

<导航><ul class="nav">lt；！--添加了Niall--><li class="element">主页0<李><li class="element">主页1<李><li class="element">主页2<李><li class="element">主页3</li><li class="element">主页4<李><ul><导航>

css：

.元素.活动{背景：#99C262；}

js:

$（函数（）{$（".element"）.click（function（）{$（this）.thoggleClass（"活动"）；})；})；

这取决于您希望如何使用解决方案。

我会把身份证从lis中删除——你不需要它们——你可以让事情变得更简单。

我已经在导航中添加了一个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。

我认为您必须确保您的代码在文档上运行。请参阅我在这里使用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 的示例

设法使其工作：

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");
});
}
相关文章：