导航上的点击相应的页面 上面的相应CSS会变怎么做 导航上的点击相应的页面 上面的相应CSS会变怎么做就比如http://www.zjct.org/ 这个上面的导航 点击首页 页面 按钮就变成红色 点击哪里CSS都会变 用JS怎么写 google了半天也找不到答案 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <li class="li06 zuo colorf"><a class="ah06" href="/zjcyy/cypz/">创意铺子</a></li><li class="li07 colorf"><a class="ah07" href="/zjcyy/mrt/">名人堂</a></li>看到这个源码目测都是静态页面,写死的链接,然后点链接对应的页面的链接li的样式不懂可以用js来操作,只不过增加frameset以及frame即可 <!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> 你们都没明白我的意思 我的问题是加了超级链接 一旦跳转到另外个页面 css全部没了<div class="header_s_li"><ul><li class="h1"><a target="_blank" href="#"><img src="images/header/header_1.png" /></a></li><li><a target="_blank" href="#"><img src="images/header/header_2.png" /></a></li><li><a target="_blank" href="#"><img src="images/header/header_3.png" /></a></li><li><a target="_blank" href="#"><img src="images/header/header_4.png" /></a></li><li><a target="_blank" href="#"><img src="images/header/header_5.png" /></a></li></ul></div>$(document).ready(function(){$('.header_s_li ul li').click(function() { $(this).addClass("h1");});}); frameset 请教js数组的push方法怎么实现的 请问使用JSP在Tomcat6.0.18下面获得客户端网卡的Mac 地址栏字符串加密解密的问题 动态建立的可编辑的iframe怎样对它的document添加onclick事件? javascript 如何求两个日期差的天数?如:20060701-20060303. js数字如何转英文 flash显示问题 . . . netscape4.7 关于js Object的动态添加成员 请教高人指点一段编码错误 神马的加密 求高手解密_64值 function+_lOlOl100 play.js 帖子1
<li class="li07 colorf"><a class="ah07" href="/zjcyy/mrt/">名人堂</a></li>
看到这个源码
目测都是静态页面,写死的链接,然后点链接对应的页面的链接li的样式不懂
可以用js来操作,只不过增加frameset以及frame即可
<!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>
<div class="header_s_li">
<ul>
<li class="h1"><a target="_blank" href="#"><img src="images/header/header_1.png" /></a></li>
<li><a target="_blank" href="#"><img src="images/header/header_2.png" /></a></li>
<li><a target="_blank" href="#"><img src="images/header/header_3.png" /></a></li>
<li><a target="_blank" href="#"><img src="images/header/header_4.png" /></a></li>
<li><a target="_blank" href="#"><img src="images/header/header_5.png" /></a></li>
</ul>
</div>$(document).ready(function(){$('.header_s_li ul li').click(function() {
$(this).addClass("h1");
});
});