突出的CSS菜單欄

當前選定的鏈接我有這個網址的頁面：http://localhost:8000/progress/c/?l=1&c=1 突出的CSS菜單欄

及以下內容作爲一個簡單的CSS菜單欄的工作。

<div class="menu_div"> 
    <ul> 
     <li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div>

CSS樣式是

.menu_div ul 
{ 
    padding:6px; 
    margin:0px; 
    font-size:12px; 
    list-style:none; 
    text-indent:15px; 

} 
.menu_div ul li 
{ 
    line-height:28px; 
    border-bottom:1px solid #000; 
} 
.menu_div ul li a 
{ 
    text-decoration:none; 
    font-color:#3A332D; 
    display:block; 
} 
.menu_div ul li a:hover 
{ 
    background:blue; 
} 
.menu_div ul li#active 
{ 
    background:blue; 
}

當我將鼠標懸停在鏈接的背景顏色的變化，但當前選擇的菜單鏈接不以藍色突出顯示。

我使用Django框架。

來源

2012-04-29 John

我相信你'localhost'網址是不是爲世界各地的訪問;） – VisioN

@VisioN如果你看過問題，除此之外。 – sg3s

@ sg3s，是的，但你怎麼知道作者的意思是「主動」。我們沒有足夠的HTML。如果'當前選擇的菜單鏈接'帶有'active'類，那麼答案很明顯，否則可能會有其他問題。 – VisioN

更換您的ID #active到.active類 - 這是更正確的做法：

.menu_div ul li.active 
{ 
    background:blue; 
}

這個類在列表中添加活性元素：

<div class="menu_div"> 
    <ul> 
     <li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div>

來源

2012-04-29 18:05:16 Skay

.menu_div ul li#active

報告說，活躍鏈接需要一個活動的ID。我看不到身份證，因此爲什麼不是藍色。

如果您希望鏈接激活，你將不得不設置的項目是活躍的，瀏覽器不會爲你做。

來源

2012-04-29 18:05:24 epascarello

在你的CSS你必須用id「主動」的一類，這也許應該是這樣的一類：

.menu_div ul li.active 
{ 
    background:blue; 
}

而且，我不會建議嘗試以匹配「主動」或更好使用JavaScript客戶端制定'當前'頁面。

而不是你的服務器上的腳本應該認識到當前頁面，並添加一個類相關的菜單項，以便它看起來像這樣：

<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>

來源

2012-04-29 18:06:25 sg3s

謝謝。我正在考慮使用JavaScript添加該功能。但既然你不推薦它，我必須找到一種方法來做到這一點在django – John

@John不幸的是，我不太熟悉Django，但一個簡單的搜索引導我到這個頁面可能是有用的：http：// gnuvince .wordpress.com/2007/09/14/a-django-template-tag-for-the-current-active-page/ – sg3s

還有一個問題。子彈出現在我的ul列表中。有沒有辦法讓它消失。 – John

試試這個jQuery代碼，它會自動添加類

$(function(){ 

    var url = window.location.href; 

    $("#menu a").each(function() { 

     if(url == (this.href)) { 
      $(this).closest("li").addClass("active"); 
     } 
    }); 

});

來源

2013-08-05 10:32:03

只是

CSS

.menu_div ul li.active{background:blue}

HTML

<div class="menu_div"> 
    <ul> 
     <li id="page1"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li> 
     <li id="page2"><a href="/progress/c/?l=2&c=1"> l1c1 </a></li> 
     <li id="page3"><a href="/progress/c/?l=3&c=1"> l1c1 </a></li> 
     <li id="page4"><a href="/progress/c/?l=4&c=1"> l1c1 </a></li> 
    </ul> 
</div>

腳本

#In every page just put this script and change the id 
<script>$("#page1").addClass('active');</script>

來源

2013-08-05 11:01:14 catherine

突出的CSS菜單欄

回答

相關問題