1

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

我想要以下行为 -

悬停时， opacity: 1 和过渡。在 class="active" 上，不透明度：1。

我究竟做错了什么？

4

3 回答 3

2

您的代码可以压缩为仅使用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');
}

检查小提琴

于 2013-08-02T01:32:40.113 回答
0

我已经通过使用类而不是硬编码数组重写了您的代码，使其更加简洁，这使得将来添加/删除选项变得更加容易：

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

于 2013-08-02T01:44:10.467 回答
0

.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

小提琴

于 2013-08-02T01:33:57.043 回答