javascript - 如何使选定的导航按钮保持事件状态

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 更简单、更 DRY 的解决方案:

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