第一种方法:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{margin:0;padding:0; font:14px/2em "宋体",sans-serif;} body{padding: 20px;} div{clear: both; border: 1px solid blue; 300px;height:150px;border-top: 2px solid #E39737;display: none;padding:10px;} ul{list-style: none;} a{float: left;text-align: center; 70px;height:30px;line-height: 30px;margin:0 5px;border: 2px solid #999;text-decoration: none;border-bottom: 0px;} .selected{border-top: 2px solid #E39737;border-bottom: 3px solid #fff;margin-bottom: -3px;} . </style> <script type="text/javascript"> var lis; var divs; // JS实现选项卡切换 window.onload = function () { lis = document.getElementsByTagName("a"); divs = document.getElementsByName("content"); for (var i=0; i <lis.length; i++) { select(lis[i],i);//这里要把i传入,这样我们就可以判断是第几个选项卡,对哪个div进行展示 } } function select(obj,position) { obj.onmouseover = function () { for (var i = 0; i <divs.length; i++) { if (position == i) { lis[i].className = "selected"; divs[i].style.display = "block"; }else{ lis[i].className = ""; divs[i].style.display = "none"; } } } } </script> </head> <body> <!-- HTML页面布局 --> <ul> <li><a href="#" class="selected">房产</a></li> <li><a href="#">家居</a></li> <li><a href="#">二手房</a></li> </ul> <div id="fangchan" name="content" style="display: block;"> 275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br> </div> <div id="jiaju" name="content"> 40平出租屋大改造 美少女的混搭小窝<br> 经典清新简欧爱家 90平老房焕发新生<br> 新中式的酷色温情 66平撞色活泼家居<br> 瓷砖就像选好老婆 卫生间烟道的设计<br> </div> <div id="ershoufang" name="content"> 通州豪华3居260万 二环稀缺2居250w甩<br> 西3环通透2居290万 130万2居限量抢购<br> 黄城根小学学区仅260万 121平70万抛!<br> 独家别墅280万 苏州桥2居优惠价248万<br> </div> </body> </html>
第二种方法:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> li{ list-style-type:none; border:1px solid GRAY; border-bottom:2px solid red; display:inline-block; /*这里的设置就使列横向排列了*/ line-height:2em; padding:0 1em; cursor:pointer; /*cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状;*/ } ul{margin-left:-35px;} div{ border:1px solid gray; 350px; margin-top:-18px; } .selected{ border-top:2px solid red; } .currentl{ border-top:2px solid red; border-bottom:2px solid white; } .show{display:block;} .hide{display:none;} </style> <script type="text/javascript"> var xli=document.getElementsByTagName("li"); var xdiv=document.getElementsByTagName("div"); function change(x){//传入当前的元素 for(var i=0;i<xli.length;i++){ //判断是否等于当前的元素,如果不等于 if(xli[i]!=x){ xli[i].className=""; xdiv[i].className="hide"; }; if(xli[i]==x){ x.className="currentl"; xdiv[i].className="show selected" }; }; }; </script> </head> <body> <ul> <li class="currentl" onmouseover="change(this)">房产</li> <li onmouseover="change(this)">家居</li> <li onmouseover="change(this)">二手房</li> </ul> <div id="house" class="selected"> <p>275万购昌平邻铁三居 总价20万买一居</p> <p>200万内购五环三居 140万安家东三环</p> <p>北京首现零首付楼盘 53万购东5环50平</p> <p>京楼盘直降5000 中信府 公园楼王现房</p> </div> <div id="home" class="hide"> <p>40平出租屋大改造 美少女的混搭小窝</p> <p>经典清新简欧爱家 90平老房焕发新生</p> <p>新中式的酷色温情 66平撞色活泼家居</p> <p>瓷砖就像选好老婆 卫生间烟道的设计</p> </div> <div id="shand" class="hide"> <p>通州豪华3居260万 二环稀缺2居250w甩</p> <p>西3环通透2居290万 130万2居限量抢购</p> <p>黄城根小学学区仅260万 121平70万抛!</p> <p>独家别墅280万 苏州桥2居优惠价248万</p> </div> </body> </html>