jquery - 如何用jQuery实现这种导航平铺效果？

Question

在这里，我创建了一个jsfiddle。

当我将鼠标悬停在特定的图块上时，它的文本会显示，而在 mouseout 时它会隐藏。（这很好用）。

当我单击位于特定图块（金色）内的链接时，该图块的文本会永久显示（单击其他链接时应该隐藏）。

现在的问题是，当我单击位于另一个图块内的链接时，应该隐藏所有其他图块的文本，但这并没有发生。这是我的 jQuery 代码。

// -- navigation tile click -- //           
$('.nav a').on("click",function(){                 
     $(this).addClass('selected');                          
});

// -- navigation tiles mouseover -- //      
$('.nav > div').on("mouseover",function(){  
    $(this).find('.abs').show();        
}).on("mouseout",function(){
    if(!$(this).find('a').hasClass('selected'))
    {
        $(this).find('.abs').hide();
    }
});

有什么更好的方法呢？为此编写jQuery的更好方法是什么？

Answer 1

看看这个小提琴

$('.nav > div').hover(function(){
    $(this).find('.abs').stop().animate({marginLeft:100});
    },function(){
    $(this).find('.abs').stop().animate({marginLeft:0});
});

$('.nav a').click(function(){
    $('.nav a').removeClass("active");
    $('.nav a').next("span").animate({marginLeft:0}).removeClass("absActive");
    $(this).addClass("active");
    $(this).next("span").addClass("absActive");
});

Answer 2

看看这个 first remove class from .nav athen add selectedfor a clicked element

$('.nav a').on("click",function(){ 
    $('.nav a').removeclass("selected")
    $(this).addClass('selected');                           
});

小提琴

Answer 3

根据我的理解，假设查看以下链接 http://jsfiddle.net/sarfarazdesigner/MehSt/4/

检查这里的代码

$('.nav a').on("click",function(){
    $('.abs').hide();
    $(this).next('span').show();
    $(this).addClass('selected');                           
});

Answer 4

好的，我想你想实现这个：

$(document).ready(function() {          
     $('.nav').on("click",function(){               
          $(this).addClass('selected');                
          $(this).find('.abs').show();  
          $(this).siblings().removeClass('selected');
          $(this).siblings().find('.abs').hide();                          
     });


    // -- navigation tiles mouseover -- //      
     $('.nav').on("mouseover",function(){  
         $(this).find('.abs').show();        
     }).on("mouseout",function(){
         if(!$(this).hasClass('selected'))
           {
             $(this).find('.abs').hide();
           }
      });
});

这是最新的 JSFiddle： http: //jsfiddle.net/MehSt/8/
由于 HTML 结构有点复杂，我指向了“div”，而不是“a”标签。