HTML导航菜单选中状态怎么做?JS、JQ都行。求代码大神们。

HTML导航菜单选中状态怎么做?JS、JQ都行。求代码大神们。做了个简单的导航菜单用来测试这个效果。代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DT... HTML导航菜单选中状态怎么做?JS、JQ都行。求代码大神们。

做了个简单的导航菜单用来测试这个效果。

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#left {
width: 200px;
height: 9999px;
background: #f7fafc;
border-right: 1px solid #e5ebf1;
float: left;
}
#left div {
height: 40px;
color: #384463;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #f6fafd;
border-top: 1px solid #f6fafd;
text-align: center;
}
#left div:hover {
background: #06C;
color: #FFF
}
</style>
</head>

<body>
<div id="left">
<div>导航1</div>
<div>导航2</div>
<div>导航3</div>
<div>导航4</div>
<div>导航5</div>
</div>
</body>
</html>

在一个页面里。比如我鼠标点击导航3. 导航3的背景就被选中。
一直保持如图这个背景直到点击下一个导航才消失。
点击的下一个导航会再次保持如图的背景。

大神代码越简单越好。 HTML、js、jq都行。展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

莫路草根
推荐于2017-12-15 · TA获得超过4102个赞

知道大有可为答主

回答量：4184

采纳率：85%

帮助的人：1041万

我也去答题访问个人页

关注

展开全部

<script>
function js(id)
{
	return document.getElementById(id).getElementsByTagName("div");
}
for(var i=0;i<js("left").length;i++)
{
	js("left")[i].onclick=function(){
		delBackgroundColor();
		this.style.background = "#06C";
		this.style.color = "#fff";
	}
}
function delBackgroundColor()
{
	for(var i=0;i<js("left").length;i++)
	{
		js("left")[i].style.background = '';
		js("left")[i].style.color = '#384463';
	}
}
</script>

把上面的代码复制到你的<body>标签的最下面就可以了。。

追问

大神，放上去了没有用啊?点击的时候没有调用你写的方法..
  再测试测试

追答

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#left {
width: 200px;
height: 9999px;
background: #f7fafc;
border-right: 1px solid #e5ebf1;
float: left;
}
#left div {
height: 40px;
color: #384463;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #f6fafd;
border-top: 1px solid #f6fafd;
text-align: center;
}
#left div:hover {
background: #06C;
cursor:pointer;
color: #FFF
}
</style>
</head>

<body>
<div id="left">
  <div>导航1</div>
  <div>导航2</div>
  <div>导航3</div>
  <div>导航4</div>
  <div>导航5</div>
</div>
</body>
<script>
function js(id)
{
	return document.getElementById(id).getElementsByTagName("div");
}
for(var i=0;i<js("left").length;i++)
{
	js("left")[i].onclick=function(){
		delBackgroundColor();
		this.style.background = "#06C";
		this.style.color = "#fff";
	}
}
function delBackgroundColor()
{
	for(var i=0;i<js("left").length;i++)
	{
		js("left")[i].style.background = '';
		js("left")[i].style.color = '#384463';
	}
}
</script>
</html>