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

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

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:

• Home0
家庭1 家庭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);
    }

})();

（函数（）{
var nav=document.getElementById（'nav'）；
函数handleClick（e）{
对于（变量i=0；i

请在此处查看演示：

---

显然，如果您要离开页面，您将需要以不同的方式处理此问题，可能需要查看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');
  });

});

.active{
背景色：#99C262；
}

一个
两个
三
四
五

$（函数（）{
var all=$（'ul li'）；
all.on（'click'，function（）{
//清楚的
all.removeClass（'active'）；
//只设置这个
$（this.addClass（'active'）；
});
});

---

设法使其工作：
CSS
Html:

---

@所有CSS都不重要，因为CSS的工作方式JS会覆盖它。您的页面是否正在更改URL？是否有更改页面状态的网络请求？这里可能有比简单的CSS HTML和JS更多的内容，我建议删除所有您不需要的内容，让它工作起来，然后一块一块地放回去，直到找到破坏代码的地方。谢谢Daniel。我会努力的。我试图在这里添加CSS作为注释，但我不清楚。我认为所有的建议都很好，应该是有效的。正如你所说的，一个简单的事实是，在我将它们放入代码时，没有任何变化，这表明还有其他事情正在发生。奇怪的是，如果我在JS中引入一个警报，它就可以正常工作。它只是不适用于JS的其余部分。好吧，我已经失去了让它工作的所有希望。我已经删除了所有CSS，并尝试了我能想到的一切，但这对我来说就是行不通。按钮在瞬间改变颜色，但随后恢复为非活动颜色。在这个阶段，我会采取任何区别按钮是活跃的。在上次单击的按钮周围突出显示CSS？或者我愿意接受任何建议。我认为我的问题是关于在cloud 9上构建页面的脚手架，但老实说，在我的教育阶段，我无法解决这个问题。

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

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

})();

.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');
  });

});

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

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

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

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