JavaScript实现的简单标签点击切换功能示例

本文实例讲述了Java脚本语言实现的简单标签点击切换功能。分享给大家供大家参考，具体如下：

！titlewww.jb51.net标签点击切换/title style type=' text/CSS ' * { padd : 0；保证金： 0；} #示例{宽度： 500像素高度： 400像素；margin: 0 auto} #示例高清ul li{ display:内嵌块；宽度： 32%;高度： 36px线高： 36px边界半径： 5px背景色： # 333;文本对齐：中心；color: # fff} #示例高清ul李。当前{背景色：绿色；} #示例bd{ border: 1px固体# cccborder-radius : 5px；} #示例bd ul li{ display:无；} #示例李。当前{显示：块；}/style/head body div id=' example ' div class=' HD ' ul Li class=' current ' Beijing/Li Li Shanghai/Li Li ligongzhou/Li/ul/div class=' BD ' ul Li class=' current '这是北京！/李莉是上海/李莉是广州/li /ul /div /div脚本类型=' text/JavaScript ' var HD=document。getelementsbyclassname(' HD ')[0].getElementsByTagName(' Li ')；var BD=文档。getelementsbyclassname(' BD ')[0].getElementsByTagName(' Li ')；for(var I=0；i hd.lengthi ) { hd[i].onclick=function(){ DotAbs(this)；} }函数DotAbs(obj){ for(var I=0；I HD . lengthi){ if(HD[I]==obj){ HD[I].当前日期[i].类名='当前；}else{ hd[i].类名=bd[i].className=} } }/脚本/正文/html使用本站HTML/CSS/JS在线运行测试工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试运行效果：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。