基于OpenLayers的WebGIS程序二次开发实例教程
34550 人在学
专题课程
在html中<li>标签可以用来定义列表，使用<li>标签定义的列表可以是个无序列表也可以是有序列表。
案例：tab切换效果
获取所有的li标签
第一件事：把这个a所在的所以兄弟元素的类样式全部移除(removeAttributes)
第二件事：当前点击的a父级元素li(点击这个a所在的所在元素li)，设置背景颜色(this.parentNode.className)
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
#listli{
list-style-type:none;
width:80px;
height:30px;
line-height:30px;
background-color:beige;
text-align:center;
float:left;
margin-left:5px;
}
#listli.current{
background-color:burlywood;
}
#listlia{
text-decoration:none;
}
</style>
</head>
<body>
<divid="menu">
<ulid="list">
<liclass="current"><ahref="http://www.baidu.com" rel="nofollow" target="_blank" rel="nofollow" target="_blank" rel="nofollow" target="_blank" >首页</a>
</li>
<li><ahref="Javascript:void(0)">播客</a></li>
<li><ahref="javascript:void(0)">博客</a></li>
<li><ahref="javascript:void(0)">相册</a></li>
<li><ahref="javascript:void(0)">关于</a></li>
<li><ahref="javascript:void(0)">帮助</a></li>
</ul>
</div>
<scriptsrc="common.js"></script>
<script>
//获取所有的li标签
varliObjs=my$("list").getElementsByTagName("li");
//循环遍历，找到每个li中的a，注册点击事件
for(vari=0;i<liObjs.length;i++){
//每个li中的a
varaObj=getFirstElement(liObjs[i]);
aObj.onclick=function(){
//第一件事：把这个a所在的所以兄弟元素的类样式全部移除
for(varj=0;j<liObjs.length;j++){
liObjs[j].removeAttribute("class");
}
//第二件事：当前点击的a父级元素li(点击这个a所在的所在元素li)，设置背景颜色
this.parentNode.className="current";
returnfalse;//阻止超链接跳转
};
}
</script>
</body>
</html>
<li>标签定义列表项目(li是lists的缩写)。
<li>标签可用在有序列表(<ol>)和无序列表(<ul>)
粤公网安备44010602001432号