我是开发网页的新手。我正在寻找类似于stackoverflow.com的菜单(如上面显示的问题,标签,用户)。如何更改所选菜单的颜色(例如,“点击”时问题的背景颜色将变为橙色)?
我设法改变颜色,而使用CSS(),因为这很简单,但我遇到麻烦。
只能使用CSS来改变点击的项目的颜色吗?
解决方法
设置类活动和悬停的样式:
比起你需要让li活跃,在服务器端。
所以当您绘制菜单时,您应该知道哪个页面被加载并设置为:
<li class="active">Question</li> <li>Tags</li> <li>Users</li>
但是,如果您正在更改内容而不重新加载,则无法更改在服务器上设置活动的li元素,则需要使用javascript:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style> .menu{width: 300px; height: 25; font-size: 18px;} .menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;} .menu li:hover,.menu li.active { background-color: #f90; } </style> </head> <body> <ul class="menu"> <li>Item 1</li> <li class="active">Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> <script type="text/javascript"> var make_button_active = function() { //Get item siblings var siblings =($(this).siblings()); //Remove active class on all buttons siblings.each(function (index) { $(this).removeClass('active'); } ) //Add the clicked button class $(this).addClass('active'); } //Attach events to menu $(document).ready( function() { $(".menu li").click(make_button_active); } ) </script> </body> </html>