自定義顯示/隱藏鏈接

Question

我打算在鏈接上應用自定義顯示/隱藏效果，以便當用戶懸停在鏈接上時，會在其位置顯示不同的鏈接。我不是在JavaScript這麼好，這裏是我嘗試：

<div id="nav"> 
    <a href="#"><li id="a1">hover link 1</li></a> 
    <a href="#"><li id="a2">show link 1</li></a> 
    <a href="#"><li id="b1">hover link 2</li></a> 
    <a href="#"><li id="b2">show link 2</li></a> 
    <a href="#"><li id="c1">hover link 3</li></a> 
    <a href="#"><li id="c2">show link 3</li></a> 
</div> 

的JavaScript：

$("#nav a.li").hover(function() { 
    (this.id.charAt(0)+"1").hide(); 
}); 

Here is the fiddle

Answer 1

你錯過了$並需要添加# befor id您還需要更改選擇器，因爲您沒有類li的錨點

更改

(this.id.charAt(0)+"1").hide(); 

到

$('#' +this.id.charAt(0)+"1").hide(); 

你的代碼將是

Live Demo

$("#nav a li").hover(function() { 
    $('#'+ this.id.charAt(0)+"1").hide(); 
}); 

編輯如果你想刪除的項目正在盤旋，然後使用$(this)

Live Demo

$("#nav a li").hover(function() { 
    $(this).hide(); 
});