我是开发网页的新手。我希望创建类似于 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>
关于html - 如何动态改变网页选中菜单项的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6239609/