變化的活動菜單項

我創建簡單的側面菜單中的背景，這樣當，當他點擊它應該被保持到用戶點擊其他項目變化的活動菜單項

我的代碼對項目的背景顏色變化的用戶將鼠標懸停懸停效果：

ul#nav { 
    padding: 0; 
    margin: 0 0 10px 0; 
    -moz-appearance: menubar; 
     -webkit-appearance: menubar; 
    background-position: left; 
    font-size: larger; 
} 

.mmenu{ width: 190px; 
     position: fixed; 
} 
.mmenu a{ 
    font-size:14px; 
    font-family: Arial, sans-serif; 
    font-style: normal; 
    font-weight:bold; 
    display: block; 
} 

.mmenu a:hover{ color: white; 
background-color: #003366; 
font-style: oblique; 
border-top: 0px outset #003366; 
border-bottom: 0px inset #003366; 
border-right:0px outset #003366; 
border-left: 0px inset ; 
}

懸停效果工作正常，但風格不保持當我點擊任何項目，我試圖活動，但沒有運氣。任何人都知道問題在哪裏？

HTML

<div id="nav" class="mmenu" style="border: 2px double #f2f2f2; left: 25px; width: 200px; border-radius: 6px;"> 
          <ul type="none">   
             <li><a href="another example.php">Messages</a></li> 
             <li><a href= "example.php">My Conferences</a></li> 

            </ul> 
           </div>

來源

2012-05-10 Samer El Gendy

你不能處理通過CSS單擊事件，你應該用js/jQuery的，而不是 – Onheiron

您將需要一些JavaScript，你仍然想知道解決的辦法 – 2012-05-10 12:49:12

一旦鏈接被點擊，你應該風格手工添加到這個鏈接，以顯示此項目現在處於活動狀態。 –

屬性

Onclick="this.style.background='#003366'"

只需添加菜單項（「.mmenu一」）

來源

2012-05-10 12:57:54

Iam該死的確定它會爲你工作 – 2012-05-10 12:59:52

這個問題沒有被標記爲javascript或jquery ... !!! –

當你知道它不能用CSS來完成，那麼你會怎麼做，並且OP不會對一行js過敏 – 2012-05-10 13:02:17

當你點擊一個導航項目，它是鏈接到另一個頁面？在這種情況下，您需要爲班級添加導航項目和樣式的類。

<style> 
body.page-name-1 #nav li.page-name-1 a, body.page-name-2 #nav li.page-name-2 a 
{ 
    background-color: #003366; 
} 
</style> 

<body class='<?php echo $page_name ?>'> 
<!-- If you are using PHP, and every page has a $page_name --> 
<div id='nav' class='mmenu'> 
<ul> 
<li class='page-name-1' ><a href="another example.php">Messages</a></li> 
<li class='page-name-2' ><a href= "example.php">My Conferences</a></li> 
</ul> 
</div> 
... 
</body>

來源

2012-05-10 13:14:57

變化的活動菜單項

回答

相關問題