如何使用jQuery實現此導航切片效果？

當我將鼠標懸停在特定的磁貼上時，它的文本顯示在鼠標上並隱藏。（這工作正常）。

當我點擊一個特定瓷磚（金色）內的鏈接時，該瓷磚的文字會永久顯示（點擊其他鏈接時應該隱藏）。

現在的問題是，當我點擊另一個瓷磚內的鏈接時，所有其他瓷磚的文字應該隱藏，但這不會發生。這是我的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？

來源

2013-06-27 Jaydev

OK，我想你想實現這一點：

$(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結構的，我已經指出，在「格」，而不是'a'標籤。

來源

2013-06-27 11:49:41 sinisake

我已經對這段代碼做了一些改變。這裏是最新的小提琴。 http://jsfiddle.net/MehSt/10/ – Jaydev

是的，更短，更好 - 甚至var _this = $（this）;可以刪除。 :) – sinisake

var _this = $（this）;通過這樣做，我減少了重複呼叫$（this）。 – Jaydev

看一看從.nav a此先刪除類，然後添加selected一個點擊的元素

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

fiddle

來源

2013-06-27 11:02:47

我問的問題在這裏，但長期使用這種沒有文本顯示之前試過這個問題，以及更早的版本。它分別顯示並隱藏在mouseover和mouseout上。 – Jaydev

@Jaydev查看我已更新的小提琴http://jsfiddle.net/MehSt/7/ –

根據我的理解是我假設看看這個鏈接如下 http://jsfiddle.net/sarfarazdesigner/MehSt/4/

查看此處的驗證碼

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

來源

2013-06-27 11:14:26

當您將鼠標指向另一個小方塊時，單擊鏈接後（不要單擊），然後顯示兩個小方塊的文本。將鼠標懸停在所有圖塊上時，將顯示所有樣式的文本，但不會隱藏。 – Jaydev

請確認我是否正確？我們可以解決這個問題也面臨它，但我不能解決它，因爲我不知道這是否正確。讓我知道 –

看看這個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"); 
});

來源

2013-06-27 12:21:19

如何使用jQuery實現此導航切片效果？

回答

相關問題