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都行。 展开
做了个简单的导航菜单用来测试这个效果。
代码如下:
<!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个回答
展开全部
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
