Javascript 使用jQuery将类设置为active on click（）

JSFiddle-

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

}

我喜欢以下行为-

悬停时，不透明度：1和过渡。 在class=“active”上，不透明度：1

---

我做错了什么？

只需使用

此

上下文，您的代码就可以压缩为以下内容

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

---

此代码应添加类

。单击菜单项时选择

$("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

---

我使用类而不是硬编码数组将您的代码改写为更精简的代码，这使得以后添加/删除选项更容易：

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

---

请参阅此提琴中的演示：

锚不是兄弟姐妹仅供参考，您不需要逐个删除类。

removeClass（）

函数将从jquery对象中的所有项中删除该类。

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

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