如何給當前菜單提供css風格？

當前鏈接的CSS是什麼樣的，當有人去關於我們頁面，然後關於我們的顏色變成紅色....然後去聯繫我們頁面，然後關於我們顏色變化爲默認和聯繫我們顏色變爲紅色.. ..如何給當前菜單提供css風格？

請幫助我新的設計師......

2012-04-11 Jaiff

嗨，你可以使用活動類.. – 2012-04-11 12:00:08

使用：懸停在CSS

例如你在你的實際代碼

如使用任何元素替換李。如果你喜歡設計

<ul> 
    <li> Menu1</li> 
    <li> Menu2</li> 
</ul>

來源

2012-04-11 12:03:54 vikrantx

它是一個鼠標的CSS我知道這一點，我想目前的鏈接CSS像有人打開主頁，然後HOME菜單的顏色變爲紅色時，就知道... .. – Jaiff 2012-04-11 12:13:17

菜單Whwn單擊特定的菜單上，該perticular頁面將開放

li:hover{backgroundcolor:Red;}

L1標籤。然後只是做簡單的事情，

寫活躍的類。

應用此，對於主頁

的公司簡介頁面活動類屬性關於我們李

<ul> 
    <li class="active">Home</li> 
    <li>Projects</li> 
    <li>About Us</li> 
</ul>

來源

2012-04-11 12:24:32 vikrantx

你不能只使用CSS來確定哪些網頁您的用戶當前所在 - 只要它不會這樣做。你必須調整你的標記以添加CSS可以使用的某種類型的鉤子。像這樣 -

<ul id="nav"> 
    <li><a href="about.html" class="here">About Us</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

如果你正在建立一個靜態的HTML網站，你可以手動更改每個頁面上的HTML，以反映在菜單當前頁面。

如果你正在構建更復雜的東西，你可能需要依靠PHP或JavaScript來找出當前頁面。這個腳本是有點老了（這是由傑里米Keith的「DOM腳本」），但它會做的工作：

function highlightPage(id){ 
    //make sure DOM methods are understood 
    if(!document.getElementsByTagName) return false; 
    if(!document.getElementById) return false; 
    if(!document.getElementById(id)) return false; 
    var nav = document.getElementById(id); 
    var links = nav.getElementsByTagName('a'); 
    for (var i=0; i < links.length; i++){ 
     var linkurl = links[i].getAttribute('href'); 
     var currenturl = window.location.href; 
     //indexOf will return -1 on non-matches, so we're checking for a positive match 
     if (currenturl.indexOf(linkurl) != -1) { 
      links[i].className = "here"; 
      var linktext = links[i].lastChild.nodeValue.toLowerCase(); 
      document.body.setAttribute("id",linktext); 
     } 
    } 
} 

addLoadEvent(function(){ 
    highlightPage('nav'); 
    }); 

function addLoadEvent(func){ 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
     window.onload = func; 
    } else { 
     window.onload = function(){ 
      oldonload(); 
      func(); 
     } 
    } 
}

這個腳本會去的externally linked javascript file。

來源

2012-04-11 12:30:45 chipcullen

我想在我的所有8個鏈接，如菜單，關於我們，聯繫我們，產品..等等。 – Jaiff 2012-04-11 12:57:11

這就是這個腳本所做的 - 它將類「這裏」添加到與當前匹配的導航項目窗口路徑，動態。依靠JavaScript來處理這種事情並不是最好的想法，但它確實有效。 – chipcullen 2012-04-11 13:17:24

給身體一個id名<body id="about-us">。您的鏈接也需要一個ID <a href="#" id='this-link">。然後：

#about-us #this-link { 
color:red; 
} 
#contact-us #this-link { 
}

來源

2012-04-11 12:43:16 Rob

如何給當前菜單提供css風格？

回答

相關問題