如何在單頁網站的導航中實現活動狀態

我正在單頁網站上工作。在本網站中，我希望在導航欄中將活動部分或「頁面」加下劃線。目前我點擊鏈接後會顯示帶下劃線的鏈接。但是，當我點擊轉到另一個活動的「頁面」時，它會保持下劃線。如何在單頁網站的導航中實現活動狀態

這裏是導航是如何設置的HTML：

<div id="navbar" class="center"> 
    <ul> 
     <li><a href="#home">home</a></li> 
     <li><a href="#about">about</a></li> 
     <li><a href="#music">music</a></li> 
     <li><a href="#videos">videos</a></li> 
     <li><a href="#connect">connect</a></li> 
     <li><a href="#contact">contact</a></li> 
    </ul> 
</div>

我寫我的代碼了，其餘在此的jsfiddle：http://jsfiddle.net/GdePr/。任何人都能想到一些解決方案嗎

來源

2013-08-27 justLearning

你只是忘了添加jQuery和設置代碼在DOM準備運行：http://jsfiddle.net/GdePr/8/

$(function(){ 
    $('#navbar a').click(function() { 
     $('#navbar a').css('text-decoration', 'none');//don't forget to reset other inactive links 
    $(this).css('text-decoration', 'underline'); 
    }); 
});

，但我會建議是將類active添加到選定的鏈接，並在您的CSS文件中給它underline屬性，以便您稍後可以在腳本中識別當前活動鏈接：http://jsfiddle.net/GdePr/14/

$(function(){ 
    $('#navbar a').click(function() { 
     $('#navbar a').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

CSS：

a.active{ 
     text-decoration: underline !important; 
    }

來源

2013-08-27 00:25:36 MaveRick

我希望下劃線在每個部分變爲活動狀態時進行更改。 – justLearning

現在檢查鏈接 – MaveRick

謝謝....完美的作品！ – justLearning

你可以嘗試定義的活動狀態的鏈接

#navbar a:active {text-decoration:underline;}

來源

2013-08-27 00:22:58 prgrmr

對不起，但這並沒有幫助。 – justLearning

我不同意小牛稍稍回答。您需要將代碼包裝在ready()函數中。但是，要重置其他鏈接，我不會再跳入DOM。利用jQuery的siblings()函數。它獲取與選定元素相同DOM級別的元素，然後執行指定的功能。通過這樣做，您可以防止您點擊的鏈接執行兩個功能。

選擇器也將採取的parent()

$(document).ready(function() { 
    $('#navbar a').on("click", function() { 
     $(this).parent().siblings().find("a").removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

此發現a的父，這將是li優勢。然後，它獲得li的所有兄弟，所以這不包括被點擊的a的li。那麼它就是那些兄弟姐妹裏面的所有a。這將證明更多的是可重用的功能。

Fiddle

另外，不要使用!important。它可能會導致許多問題，你在路上

來源

2013-08-27 02:44:24

如何在單頁網站的導航中實現活動狀態

回答

相關問題