高亮顯示當前導航鏈接

我有一個簡單的網頁導航欄，它運行良好。現在我想對其進行設置，以便當前頁面導航鏈接具有不同的顏色。在這種情況下，我想使當前頁面的導航鏈接使用這種顏色：高亮顯示當前導航鏈接

color: #00A1DB;

我設置一個簡單的jsfiddle這說明我目前有：

http://jsfiddle.net/fmdataweb/BEmXZ/

我添加聯繫人鏈接中的一類「當前」表示這是當前頁面。現在我需要修改CSS，以便將導航欄中「聯繫人」鏈接的顏色更改爲指定的顏色。

我在過去的幾個小時內對CSS進行了黑客攻擊，但無法完成必要的修改以使其正常工作。真的很感謝，如果有人能告訴我如何做到這一點 - 現在學習CSS。

謝謝！

來源

2012-09-06 user982124

你看到我的答案？ – freebird

這是你想要的嗎？ http://jsfiddle.net/BEmXZ/2/

必備部件：

變化

.sf-menu li.current { 
    color: #00A1DB; 
}

到

.sf-menu li.current a { 
    color: #00A1DB ! important; 
}

來源

2012-09-06 07:21:29 Passerby

謝謝，這正是我以後的事情。我知道我很親密。非常感謝 – user982124

您可以輕鬆地通過單擊時將類分配給您的 '當前' 按鈕實現這一目標。

您可以通過CSS樣式類是這樣的：

.current { 
    background-color: #eee; 
}

來源

2012-09-06 07:22:32

設置類主動和懸停樣式：

比你需要讓李活躍，在服務器端。所以，當你在描繪菜單，你應該知道哪些頁面加載並將其設置爲：

<li class="active">Question</li> 
<li>Tags</li> 
<li>Users</li>

但是，如果你不重裝改變的內容，不能更改設置活動li元素在服務器上，你需要使用JavaScript：

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<style> 
    .menu{width: 300px; height: 25; font-size: 18px;} 
    .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;} 
    .menu li:hover, .menu li.active { 
     background-color: #f90; 
    } 
</style> 
</head> 
<body> 

<ul class="menu"> 
<li>Item 1</li> 
<li class="active">Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
<li>Item 5</li> 
<li>Item 6</li> 
</ul> 

<script type="text/javascript"> 

var make_button_active = function() 
{ 
    //Get item siblings 
    var siblings =($(this).siblings()); 

    //Remove active class on all buttons 
    siblings.each(function (index) 
    { 
     $(this).removeClass('active'); 
    } 
) 


    //Add the clicked button class 
    $(this).addClass('active'); 
} 

//Attach events to menu 
$(document).ready(
    function() 
    { 
    $(".menu li").click(make_button_active); 
    } 
) 

</script> 
</body> 

</html>

這裏是JSFiddle

來源

2012-09-06 07:41:39

我給你1了，我看到很多不同的系統，你真的有用！我有一個問題，因爲我對JavaScript的知識仍然是初學者。我有另一個鏈接，即網絡的標誌。這個標誌一旦被點擊會將您帶到主頁。是的，因爲它超出了ul的範圍，所以如果我點擊#home（logo href），那麼導航選擇的最後一個鏈接將保留在「active」類中。所以我想在你的代碼中加入一個if和else語句來說明，如果在選擇了.menu的ul中單擊了#home來removeClass活動。你能說服我怎麼做嗎？ –

在主頁點擊調用函數並運行這行$（「。menu li」）。removeClass（'active'）; –

See Demo

您可以使用jQuery的.addClass()方法您current類添加到點擊li元素，然後刪除使用.removeClass方法current類的所有其他元素li。

$('#nav ul li').on("click",function(){ 

    $(this).addClass('current'); 
var siblings =($(this).siblings()); 


    siblings.each(function (index) 
    { 
     $(this).removeClass('current'); 
    }); 


    });

來源

2012-09-06 08:01:50 freebird

高亮顯示當前導航鏈接

回答

相關問題