Set class to active on click() using jQuery

Question

JSFiddle - http://jsfiddle.net/4Hhhx/

Relevant Javascript code -

var menuItemNames = ['#home', '#about', '#projects', '#resume', '#contact'];

$('#home').click(safeSelect('#home'));
$('#about').click(safeSelect('#about'));
$('#projects').click(safeSelect('#projects'));
$('#resume').click(safeSelect('#resume'));
$('#contact').click(safeSelect('#contact'));

function safeSelect(divId) {
    console.log('selecting '+divId);
    if (!$(divId).length){
        return;
    }
    for (var i = 0; i < menuItemNames.length; i++){
        if (menuItemNames[i]===divId){
            $(divId).removeClass('selected unselected').addClass('selected');
        }
        else {
            $(divId).removeClass('selected unselected').addClass('unselected');
        }
    }

}

Relevant CSS code -

nav ul li a:hover {
   opacity: 1.0;
   padding-right: 3.0em;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

nav ul li a.selected {
    opacity: 1.0;
}

nav ul li a.unselected {
    opacity: .5;
}

I'd like the following behavior -

On hover, opacity: 1 and the transition. On class="active", opacity: 1.

What am I doing wrong?

Answer 1

Your code can be condensed to following just using the this context

var menuItemNames = ['#home', '#about', '#projects', '#resume', '#contact'];

$(menuItemNames.join(', ')).on('click', safeSelect);

function safeSelect(e) {  
    var $this = $(this);  
    $this.removeClass('unselected').addClass('selected');
    $this.closest('ul').find('a').not(this)
                       .removeClass('selected').addClass('unselected');
}

Check Fiddle

Answer 2

This code should add the class .select when you click on the menu items

$("nav ul li a").on("click", function() {
  $(".select").removeClass("select");
  $(this).addClass("select")
});

You have to change your hover style selector. You have to make it more specific to override the opacity, and add the select class in. Then this jQuery code will work.

Here is how the selector should look

body nav ul li a:hover, body nav ul li a.select

Fiddle

Answer 3

I have rewritten your code to be a bit more condensed by using classes rather than hard-coded arrays, which makes it easier to add/remove options in the future:

Your html now becomes:

 <nav>
    <ul>
      <li><a href="#" id="home" class="menuItem">Home</a></li>
      <li><a href="#about" id="about" class="menuItem">About me</a></li>
      <li><a href="#projects" id="projects" class="menuItem">Projects</a></li>
      <li><a href="#resume" id="resume" class="menuItem">Resume</a></li>
      <li><a href="#contact"id = "contact" class="menuItem">Contact</a></li>
    </ul>
</nav>

I have changed the CSS to set the default opacity of 0.5 to your element, rather than a separate class called unselected as you don't need this.

The javascript now becomes:

//bind the same click to all menuItems
$('.menuItem').click(function(e){
    e.preventDefault();
    safeSelect($(this))
})


//the function to add the class
function safeSelect(divId) {
    //console.log('selecting '+divId);
    $('.menuItem').removeClass('selected');

    //add the selected class to the item clicked:
    divId.addClass('selected');
}

Please see the demo in this fiddle: http://jsfiddle.net/4Hhhx/5/