Question

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

<强> Check Fiddle

Answer 2

当您单击菜单项

时，此代码应添加类.select

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

您必须更改悬停样式选择器。你必须更具体地覆盖不透明度，并添加select类。然后这个jQuery代码将起作用。

以下是选择器的外观

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

Fiddle

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/

使用jQuery在click（）上将类设置为活动状态

3 个答案: