Question

我在这里创建了一个jsfiddle。

当我将鼠标悬停在特定图块上时，其文本显示在鼠标输出上并隐藏。（这很好用）。

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

现在的问题是，当我点击位于另一个磁贴内的链接时，应该隐藏所有其他磁贴的文本，但这不会发生。这是我的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

看看这个fiddle

$('.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

从.nav a查看此第一个删除课程，然后为点击的元素添加selected

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

fiddle

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'标签。

如何用jQuery实现这个导航磁贴效果？

4 个答案: