使用jQuery將class設置為對click（）有效

Question

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

相關Javascript代碼-

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

}

相關CSS代碼-

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

我想要以下行為-

懸停時，不透明度：1和過渡。 在class =“ active”上，不透明度：1。

我究竟做錯了什么？

Answer 1

您的代碼可以濃縮為僅使用this上下文

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

檢查小提琴

Answer 2

當您單擊菜單項時，此代碼應添加類.select

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

您必須更改懸停樣式選擇器。 您必須使其更加具體，以覆蓋不透明度，並在其中添加選擇類。然后此jQuery代碼將起作用。

這是選擇器的外觀

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

小提琴

Answer 3

通過使用類而不是硬編碼的數組，我重寫了代碼，使其更加簡潔，這使得將來添加/刪除選項更加容易：

您的html現在變為：

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

我更改了CSS，將元素的默認不透明度設置為0.5，而不是將單獨的類稱為unselected因為您不需要這樣做。

JavaScript現在變成：

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

請在此小提琴中查看演示： http : //jsfiddle.net/4Hhhx/5/