jQuery - 使點擊鏈接加下劃線

Question

剛剛開始讓我的手變得與jQuery的善良和我試圖解決的第一個任務是強調一個鏈接後，它已被點擊。當然，被點擊在同一div不同的鏈接後，前一個是不再強調......

問候

Answer 1

所以基本上，你想要一種導航菜單，改變鏈接的風格，一旦點擊。首先，這只是強調一種風格：

<style type="text/css"> 
a.currentlyActive 
{ 
    text-decoration: underline; 
} 
</style> 

你會被修改的代碼是...

<a class="navigation" href="#">My First Link</a> 
<a class="navigation" href="#">My Second Link</a> 
<a class="navigation" href="#">My Third Link</a> 

只是某種類型的類，它表示它是鏈接ü幾個環節想要強調而不是強調。

接下來，添加一點jQuery魔術來點擊時應用樣式。同時，你會希望從其他人中刪除這種風格。

<script type="text/javascript"> 
$(function() { 
    $('.navigation').click(function() { 
    // this removes the underline class from all other ".navigation" links. 
    $('.navigation').removeClass('currentlyActive'); 

    // this makes the one that was clicked underlined 
    $(this).addClass('currentlyActive'); 
    }); 
}); 
</script> 

而且，就是這樣。我試圖儘可能詳細地解釋每一步所做的事情。顯然，你可以縮短課程名稱並刪除評論，以使它變得小而精。

Answer 2

$("a").click(function() { 
    var $this = $(this); 
    $this.closest("div").find("a").removeClass("underlined"); 
    $this.addClass("underlined"); 
}); 

然後，當然，你需要有一個名爲「下劃線」類，強調了這些鏈接。

Answer 3

這裏是一個更清潔的版本：

<style type="text/css"> 
.underline { border-bottom:1px solid #000; } 
</style> 

<script type="text/javascript"> 
$(function() { 
    $('a').click(function() { 
     $('a').removeClass('underline'); 
     $(this).addClass('underline'); 
    }); 
}); 
</script>