使用CSS突出顯示當前頁面

我想使用CSS突出顯示當前頁面，但不知何故，它不起作用。請看下面我的代碼。使用CSS突出顯示當前頁面

HTML

<body id="home"> 
<div id="mainNav"> 
     <a href="/Dashboard/Index" id="navIndex"> 
      <div class="circle text-uppercase"> 
       <div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span> 
      </div>  
     </a> 

     <a href="/samples/register/" id="navRegister"> 
      <div class="circle text-uppercase"> 
      <div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span> 
      </div> </a> 

     <a href="/samples/search/"> 
     ......... 
</div>

CSS

body#/samples/register a#navRegister .textStyle { 
    background-color:red !important 
}

來源

2015-09-28 abcid d

你不能使用CSS來做到這一點。您還必須使用客戶端/服務器端腳本語言 – Sak90

的語法是錯誤的。用這樣的方式：

body a#navRegister[href="/samples/register"] .textStyle { 
    background-color:red !important 
}

此致是具有div內<a>，這類似於有一瓶一些水，瓶子裏面的水沒有，這是對一個內部的最糟糕的例子。

來源

2015-09-28 20:33:15

謝謝庫馬爾！我替換了代碼，但不知何故，它仍然無法工作。 –

請給我打電話'Praveen'。你可以給我看一個現場小提琴，以便我們檢查它是否不起作用？ –

把你的身體ID，在這種情況下#home和與家庭殿元素的ID結合起來，在這種情況下#navIndex：

#home #navIndex .textStyle { 
    background-color: red; 
}

然後，您可以爲您的每個網頁上添加一個選擇抓在單獨的CSS的導航當前頁面：

#home #navIndex .textStyle, 
#register #navRegister .textStyle { 
    background-color: red; 
}

刪除該!important它只是需要一對夫婦的邊緣情況在CSS中，應當避免（我欣賞的那些邊緣案件之一，就是想以絕對能讓一個選擇器顯示一些可見的效果，這可能是你正在做的與張貼的CSS）。

您還可以使用類而不是ids作爲css選擇器。

警告：

它可能更好地使這個在HTML服務器端的服務器可以使用請求的URL來決定哪個導航產品的電流。這樣，你可以再補充一個selected-nav-text類到您當前的資產淨值跨度和你的CSS變成：

.selected-nav-text { 
    background-color: red; 
}

這是簡單的，你可以寫邏輯一旦服務器端計算當前的資產淨值和CSS使其變亮，然後當你改變你的導航功能時，功能會立即生效。

來源

2015-09-28 21:10:39

嗨Tony Leigh，非常感謝您的幫助！我嘗試#home #navIndex .textStyle，風格顯示，但是當我添加更多#register navRegister .textStyle時，當我單擊「Sample Registration」鏈接時，它不顯示任何內容！我想知道#register在哪裏。我關心CSS如何處理當前頁面。 –

我錯過了一個'＃' - 但是，你最好是閱讀和理解，而不是複製和粘貼:-) –

使用CSS突出顯示當前頁面

回答

相關問題