导航上的点击相应的页面 上面的相应CSS会变怎么做
导航上的点击相应的页面 上面的相应CSS会变怎么做
就比如http://www.zjct.org/ 这个上面的导航 点击首页 页面 按钮就变成红色 点击哪里CSS都会变 用JS怎么写 google了半天也找不到答案。。。
[解决办法]
<!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>
<title></title>
<style type="text/css">
.Menu *
{
margin: 0px 0px;
padding: 0px 0px;
line-height: 24px;
}
.Menu ul
{
list-style: none;
}
.Menu ul li
{
float: left;
width: 64px;
border: 1px solid #97B4D1;
background-color: Yellow;
margin-left: -1px;
cursor: pointer;
}
.Menu ul li:hover
{
background-color: blue;
}
.Menu ul li.Selected
{
background-color: red;
}
.Menu ul li ul
{
clear: both;
display: none;
width: 128px;
margin-top: 1px;
margin-left: -32px;
background-color: Gray;
}
.Menu ul li ul li
{
float: none;
width: 100%;
margin-top: -1px;
}
.Menu ul li ul li:hover
{
background-color: Aqua;
}
.Menu ul li:hover ul
{
display: block;
position: absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var divMenuJQ = $("#divMenu");
$(">ul>li", divMenuJQ).bind("click", function () {
$(">ul>li.Selected", divMenuJQ).removeClass("Selected");
$(this).addClass("Selected");
});
});
</script>
</head>
<body>
<div id="divMenu" class="Menu">
<ul>
<li>
<div>
菜单1
</div>
<ul>
<li>
<div>
菜单1_1 sssssssss</div>
</li>
<li>
<div>
菜单1_2</div>
</li>
<li>
<div>
菜单1_3</div>
</li>
</ul>
</li>
<li>
<div>
菜单2
</div>
<ul>
<li>
<div>
菜单2_1</div>
</li>
<li>
<div>
菜单2_2</div>
</li>
<li>
<div>
菜单2_3</div>
</li>
</ul>
</li>
<li>
<div>
菜单3
</div>
<ul>
<li>
<div>
菜单3_1</div>
</li>
<li>
<div>
菜单3_2</div>
</li>
<li>
<div>
菜单3_3</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<style>
ul,li { margin: 0; padding: 0; list-style: none;}
li{ width:150px;margin:1px; float:left; background-color: #068AC8; color:#fff; }
.def{background-color: #EC008C; }
</style>
<div id="header">
<ul>
<li class="def">首页</li> <li>园区概况</li><li>xxxxx</li>
</ul>
</div>
<script>
var lis=document.getElementsByTagName('li'),act;
for(var i=0;i<lis.length;i++)
lis[i].onclick=function(){
(act
[解决办法]
lis[0]).className='';
this.className='def';
act=this;
}
</script>
