Jee*_*eka 19 html css menu-items background-color menuitem-selection
我是开发网页的新手.我希望创建类似于stackoverflow.com中的菜单(如上面显示的问题,标签,用户).如何更改所选菜单的颜色(例如,"点击"时问题的背景颜色会变为橙色)？
我设法在悬停时(使用CSS)改变颜色,因为这很简单,但我遇到了麻烦.
我是否可以仅使用CSS实现更改单击项目颜色的效果？
Anz*_*rni 24
为活动和悬停类设置样式:
比你需要在服务器端激活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>
使用JavaScript实现它可能是最简单的...这是一个演示的JQuery脚本......正如其他人提到的......我们有一个名为'active'的类来指示活动选项卡 - 而不是伪类':活性.' 我们可以很容易地将它命名为......选择,当前等等.
/* CSS */
#nav { width:480px;margin:1em auto;}
#nav ul {margin:1em auto; padding:0; font:1em "Arial Black",sans-serif; }
#nav ul li{display:inline;}
#nav ul li a{text-decoration:none; margin:0; padding:.25em 25px; background:#666; color:#ffffff;}
#nav ul li a:hover{background:#ff9900; color:#ffffff;}
#nav ul li a.active {background:#ff9900; color:#ffffff;}
/* JQuery Example */
<script type="text/javascript">
$(function (){
$('#nav ul li a').each(function(){
var path = window.location.href;
var current = path.substring(path.lastIndexOf('/')+1);
var url = $(this).attr('href');
if(url == current){
$(this).addClass('active');
};
});
});
</script>
/* HTML */
<div id="nav" >
<ul>
<li><a href='index.php?1'>One</a></li>
<li><a href='index.php?2'>Two</a></li>
<li><a href='index.php?3'>Three</a></li>
<li><a href='index.php?4'>Four</a></li>
</ul>
</div>