/*下面是景点页面的变动代码*/.tabbox{height:176px;padding-bottom:10px;}.tabmenu{height:25px;background:url(../imges/scenery_04.jpg)rightno-repeat;}.tabmenuul{margin:0;padding:0;list-style-type:none;border-bottom:solid1px#816e59;height:25px;}.tabmenuli{overflow:hidden;float:left;text-align:center;width:89px;height:23px;line-height:23px;border-bottom:solid1px#816e59;padding-top:2px;}.tabmenuul.cli{overflow:hidden;border-bottom:solid1px#FFF;border-left:solid1px#816e59;border-right:solid1px#816e59;border-top:solid1px#816e59;font-weight:bold;cursor:pointer;width:89px;height:22px;line-height:23px;padding-top:2px;}#tabcontent,#tabcontent2,#tabcontent3{padding:5px10px18px;}#tabcontentul,#tabcontent2ul,#tabcontent3ul{margin:0;padding:5px;list-style-type:none;}#tabcontent.hidden,#tabcontent2.hidden,#tabcontent3.hidden{display:none;}.tabbox#tabcontentp,.tabbox#tabcontent2p,.tabbox#tabcontent3p{line-height:20px;color:#816e59;text-indent:2em;}.tabbox#tabcontentpa,.tabbox#tabcontent2pa,.tabbox#tabcontent3pa{color:#816e59;}.tabbox#tabcontentpa:hover,.tabbox#tabcontent2pa:hover,.tabbox#tabcontent3pa:hover{text-decoration:none;}
<!DOCTYPEhtml><htmllang="en"class="no-js"><head><metacharset="utf-8"><title>TAB切换</title><linkrel="stylesheet"type="text/css"href="12.css"><scriptsrc="12.js"></script></head><body><divclass="tabbox"><divclass="tabmenu"><ul><liοnmοuseοver="tabChange(this,'tabcontent')">婺源东线景点</li><liοnmοuseοver="tabChange(this,'tabcontent')"class="cli">李坑</li><liοnmοuseοver="tabChange(this,'tabcontent')">江湾</li><liοnmοuseοver="tabChange(this,'tabcontent')">汪口</li><liοnmοuseοver="tabChange(this,'tabcontent')">江岭</li><liοnmοuseοver="tabChange(this,'tabcontent')">晓起</li><liοnmοuseοver="tabChange(this,'tabcontent')">庆源</li></ul></div><divid="tabcontent"><ulclass="hidden"><li><ahref="#">1111111111111111111111</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li></ul><ulname="tabul"><imgsrc="imges/index_38.jpg"width="321"height="99"/><h4>小桥流水人家--李坑</h4><p><ahref="#">李坑是一个以李姓聚居为主的古村落，距婺源县城12公里。李坑的建筑风格独特，是著名的徽派建筑。给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。自宋至清，仕官富贾达百人，村里的文人留下传世著作达29部，南宋年间出...</a></p><p> </p></ul><ulclass="hidden"><li><ahref="#">3333333333333333333333</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li></ul><ulclass="hidden"><li><ahref="#">444444444444444444444444</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li></ul><ulclass="hidden"><li><ahref="#">55555555555555555555555</a></li><li><ahref="#">222222222xcC22222</a></li><li><ahref="#">2222222fsf22222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li><li><ahref="#">2222222222222222222222</a></li></ul><ulclass="hidden"><li><ahref="#">6666666666666666666666</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li></ul><ulclass="hidden"><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li><li><ahref="#">7777777777777777777</a></li></ul></div></div></canvas></body></html>
functiontabChange(obj,id){vararrayli=obj.parentNode.getElementsByTagName("li");//获取li数组vararrayul=document.getElementById(id).getElementsByTagName("ul");//获取ul数组for(i=0;i<arrayul.length;i++){if(obj==arrayli[i]){arrayli[i].className="cli";arrayul[i].className="";}else{arrayli[i].className="";arrayul[i].className="hidden";}}}
浏览器效果：
