如何使菜單主動

我有如下菜單如何使菜單主動

<ul> 
    <li><a href="index.php">Home</a></li> 
</ul>

如何使其主動當我訪問該網頁。我試過，但沒有運氣

#navigation a:active { 
    color: #000; 
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); 
    border-bottom-width:0px; 
}

我是新webie感謝您的任何建議

來源

2015-06-19 Nag

當你訪問它或當你點擊它時，你想要它改變顏色嗎？ – Gwny

你怎麼知道你在哪個頁面上？你使用PHP（或JavaScript/jQuery ...）來檢測？ – jeroen

@ jeroen頁面不能有自己的內容？你真的*需要JavaScript來檢測頁面的內容嗎？ –

到您的代碼添加ID如下

更新

<div id="menu"> 
    <ul> 
    <li id="myHome"><a href="index.php">Home</a></li> 
    </ul> 
</div>

寫腳本如下

<script> 
    window.onload = menuSelect('myHome'); 
</script>

來源

2015-06-19 09:09:22 Sha

在你index.php頁面如下，你需要編輯HTML是這樣的：

<ul> 
    <li><a href="index.php" class="active">Home</a></li> 
</ul>

在其他頁面，說about.php，你可能有這樣的事情：

<ul> 
    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php" class="active">About</a></li> 
</ul>

和更改CSS來.active，而不是:active，作爲第二個是元素的狀態：

#navigation a.active { 
    color: #000; 
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); 
    border-bottom-width:0px; 
}

來源

2015-06-19 09:06:54

然後，他仍然需要一些代碼來確定哪個菜單元素是當前活動頁面。 – Gerton

@Gerton Man，剛剛結束它！ –

這高度依賴於他是否在使用框架，如果是的話。如果您使用的是模板，只需將活動類添加到隨機菜單項即可，不會削減它。 – Gerton

-1

它不喜歡的工作。你需要讓自己的邏輯把元件上的類（或硬編碼它，如果它是一個靜態的HTML頁面）是這樣的：

<li class="current"><a href="index.php">Home</a></li>

，然後按類指定CSS：

#navigation li.active a { 
    color: #000; 
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); 
    border-bottom-width:0px; 
}

來源

2015-06-19 09:07:33 Skatch

:active僞選擇器適用於某個元素良好，活動的情況，例如鏈接被點擊時。

你需要做的是給你的<a>元素一個類的屬性和相應的樣式。

來源

2015-06-19 09:08:20 Prawny

每一頁有標識它的body標籤類：

BODY OF主頁：

<body class="home"> 
<ul> 
    <li><a href="index.php" class="home">Home</a></li> //Each navigation item also includes a class identifying that particular link. 
    <li><a href="aboutUs.php" class="aboutUs">About Us</a></li> 
</ul> 
</body>

BODY公司簡介頁面：

<body class="aboutUs"> 
<ul> 
    <li><a href="index.php" class="home">Home</a></li> 
    <li><a href="aboutUs.php" class="aboutUs">About Us</a></li> 
</ul> 
</body>

那你針對那些類在你的CSS，定義爲當前頁面不同的狀態：

CSS STYLE：

body.home a.home, body.aboutUs a.aboutUs{ 
//HERE GOES YOUR CSS 
color: #000; 
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF)); 
border-bottom-width:0px; 

}

來源

2015-06-19 09:12:02

當用戶刷新頁面時，這不會消失嗎？ –

我不認爲這將是一個JavaScript或jQuery問題！請完整閱讀！ –

是的，你說得對。我希望上面的答案能做到合適的工作 –

如何使菜單主動

回答

相關問題