<li class="banner1"> <a href="[$WebUrl$]Default.aspx">首 页 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]pro.aspx">分类列表 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]special.aspx">特价商品 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]TeamShopping.aspx">团购商品 </a> </li>
<li class="banner2"> <a href="[$WebUrl$]brand.aspx">品牌专卖 </a> </li>
我现在想实现的效果是,当鼠标点了分类列表的时候,分类列表的class="banner1",其它都是class="banner2";当鼠标点了特价商品的时候,特价商品的class="banner1",其它都是class="banner2".怎么实现,谢谢
你把下面的代码复制一下放到一个HTML文件中看下是不是你要的样子:
PS:我觉得你可以不是想要用JS的实现,而是在不同的页面高亮当前页面的菜单,这样的话,在aspx中来控制class更好一些,或者给下面的function alt()动态生成一个参数,里面就不要用this了:
<!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>
<style type="text/css">
.banner1 a{color:#f00;}
.banner2 a{color:#000;}
</style>
</head>
<body>
<ul id="menu">
<li class="banner1"> <a href="#">首 页 </a> </li>
<li class="banner2"> <a href="#">分类列表 </a> </li>
<li class="banner2"> <a href="#">特价商品 </a> </li>
<li class="banner2"> <a href="#">团购商品 </a> </li>
<li class="banner2"> <a href="#">品牌专卖 </a> </li>
</ul>
<script type="text/javascript">
window.onload = function(){
var list = document.getElementById("menu").getElementsByTagName("li");
for(var i=0;i<list.length;i++) list[i].onclick = alt;
}
function alt(){
var list = document.getElementById("menu").getElementsByTagName("li");
for(var i=0;i<list.length;i++) list[i].className = "banner2";
this.className = "banner1";
}
</script>
</body>
</html>
不用试了 上面的代码可以的
JQuery 两句话就好了,看看JQuery选择器
第一句,设置所有li的class为banner2,
第二句,设置当前的class为banner1