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

这取决于您希望如何解决问题。

我会删除你不需要它们的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');
  });

});

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

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

4 个答案: