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

Question

I have created some javascript trying to keep a nav button active. I realise this has been asked a few times before but I think my code is fairly basic and I am trying to make it work if possible. My HTML looks like this:

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

And my javascript looks like this:

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

}

However the button is not actually changing colour upon being clicked.

Any advice?

Answer 1

I tried your code and it works properly. But I suggest easier and more DRY solution with 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

It depends on how you want to go about your solution.

I would remove the id's from the lis you don't need them you can make things a lot simplier.

I have added an ID to the nav and removed the id's from the lis.

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

I am using loops to look at all of the child elements of the navigation and apply the event, this keeps your HTML clean.

I am using the function to clear the color of all of the children then reapply the colour to the item that I clicked.

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

})();

Check the demo here: http://codepen.io/DanielTate/pen/KVPoYa

Obviously if you are navigating away from the page you will need to handle this in a different way, possibly looking at the URL.

Answer 3

I think you have to make sure your code is run on document ready. See my example here using 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

Managed to get it working:

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