垂直菜單中的活動項目

在style.css中定義了垂直菜單。一旦用戶選擇特定的菜單項，我想激活樣式「活動」。我不能把class="active"放在<a之內，因爲那時這個物品會一直有效。我想要的是一旦選擇了該項目，就應用樣式「主動」。垂直菜單中的活動項目

<ul id = "vertmenu"> 
    <li> 
     <img style='float: left; margin-right: 5px;' src='images/mailIcon.png'/> 
     <a href="#" onclick="change_page('tables/111.php', 'col2')"><span>111</span></a> 
    </li> 
    <li> 
     <img style='float: left; margin-right: 5px;' src='images/calendarIcon.png'/> 
     <a href="#" onclick="change_page('tables/222.php', 'col2')"><span>222</span></a> 
    </li> 
    <li> 
     <img style='float: left; margin-right: 5px;' src='images/contactsIcon.png'/> 
     <a href="#" onclick="change_page('tables/333.php', 'col2')"><span>333</span></a> 
    </li> 
    <li> 
     <img style='float: left; margin-right: 5px;' src='images/contactsIcon.png'/> 
     <a href="#" onclick="change_page('tables/444.php', 'col2')"><span>444</span></a> 
    </li> 
</ul> 

<!-- --------- CSS ----------- --> 
    ul#vertmenu li a.active, ul#vertmenu li a.focus { 
     background: none repeat scroll 0 0 #FFCF8B; 
     outline-style: none; 
     color: #AA0000; 
     font-weight: bold; 
     text-decoration: underline; 
     } 

    #vertmenu .active{ 
    background: none repeat scroll 0 0 #FFCF8B; 
    outline-style: none; 
    color: #AA0000; 
    font-weight: bold; 
    text-decoration: underline; 
}

UPDATE 2;

<head> 
      <script> 
var links = document.getElementById("vertmenu").getElementsByTagName("a"); 

for(var i = 0; i < links.length; i++){ 
    links[i].onclick = function(event){ 
     for(var j = 0; j < links.length; j++){ 
      links[j].classList.remove('active'); 
     } 
     event.target.parentNode.classList.add('active'); 
     change_page('tables/'+event.target.innerHTML+'.php','col2'); 
     return false; 
    }; 
} 

      </script> 
</head>

來源

2012-05-14 Klausos Klausos

我們可以使用jQuery？ – ShibinRagh

ul#vertmenu li a:active 
{ 
    /*Styling*/ 
}

來源

2012-05-14 10:39:05

如果你看看我的示例代碼，你會在CSS樣式表中找到這部分代碼。但出於某種原因，當我按下它們時，「主動」樣式不適用於菜單圖標。 –

我認爲這是因爲您使用'a.active'而不是'a：active'。 –

@KlausosKlausos我剛剛在jsFiddle中測試了這個，並且項目不會突出顯示。我會和施斌的解決方案一起去。 –

怎麼這樣呢？ http://jsfiddle.net/49M49/

var links = document.getElementById("vertmenu").getElementsByTagName("a"); 

for(var i = 0; i < links.length; i++){ 
    links[i].onclick = function(event){ 
     for(var j = 0; j < links.length; j++){ 
      links[j].classList.remove('active'); 
     } 
     event.target.parentNode.classList.add('active'); 
     change_page('tables/'+event.target.innerHTML+'.php','col2'); 
     return false; 
    }; 
}

或jQuery中：

$("#vertmenu a").each(function(){ 
    $(this).click(function(){ 
     $("#vertmenu a").removeClass('active'); 
     $(this).addClass('active'); 
     change_page('tables/'+$(this).find("span")[0].text()+'.php','col2'); 
    }); 
});

來源

2012-05-14 10:50:30 Mikey

請看我的更新。我將你的代碼和我的代碼結合起來。現在，只要選擇菜單圖標，樣式就會更改。但是，DIV容器的內容不再改變。正如你所看到的，我打電話onclick =「change_page（'tables/333.php'，'col2'）」。 –

您需要將change_page移動到事件處理程序中 - 我已更新我的示例。 – Mikey

我相信你的代碼應該可以工作。請看我的帖子中的更新。我只是複製你的第一個代碼，並將其放在

11. 如何垂直對齊水平菜單中的項目？

12. 垂直居中菜單分隔圖像之間的菜單項

13. 垂直對齊的菜單項

14. 停止滑動直流jQuery垂直手風琴菜單上的當前項目

15. 垂直移動UITabBarController項目

16. GWT垂直菜單

17. superfish垂直菜單

18. 垂直菜單modx

19. Bootstrap在集中項目後垂直摺疊導航欄菜單

20. 垂直菜單/導航自動滾動

21. 菜單垂直手風琴jQuery的列表改變項目的

22. 菜單上的垂直動畫

23. ASP .Net菜單項垂直間距

24. 垂直頂部導航菜單項

25. 創建垂直選項卡菜單

26. Qt的垂直菜單

27. 垂直菜單與子菜單，但父鏈接不保持活動

28. jQuery的活動菜單項

29. 的活動菜單項

30. 導航垂直滑動菜單

回答

相關問題