Css & JavaScript & jquery 实现选项卡的制作

Css 源码

margin:0;padding: 0;} body{padding: 50px} a{text-decoration:none;} #list{list-style-type: none} #list a{ float: left; background: orange; width: 100px; height: 30px; line-height: 30px; text-align: center; } #list a:hover{opacity: 0.6} .clear{clear: both;} #content div{ width: 298px;height: 150px; border:1px solid green; } #content{ height: 152px;overflow: hidden; }  height: 152px;overflow: hidden; } 

3、如何实现移上去标签改变透明度？

opacity 属性

#list a:hover{opacity: 0.6} 

4、clear:both一般写在哪个里面？

一般单独写在一个类里面，用的时候直接调用就好了，简单方法

.clear{clear: both;} 

JavaScript 源码

margin:0px;padding: 0px } body{padding: 50px} #list{ list-style-type: none; height: 30px; font-size: 14px } #list li{ width: 80px; margin-right: 5px; height: 30px; line-height: 30px; text-align: center; border: solid green 1px;border-bottom: none; border-radius: 5px 5px 0 0; float: left; cursor: pointer; } #content div{ width: 400px; height: 150px; border:1px solid green; display: none; background: rgba(100,50,20,0.2); } #content div.show{display: block;} #list li:hover{ background: rgba(100,50,20,0.4); } .active{background: rgba(100,50,20,0.2);}  oli[i].index=i // console.log(oli[i].index) oli[i].onclick=function(){ //首先获取到当前被点击li的索引 //alert(this.index) //点击后让相应的div显示到当前 for(var j=0;j<li_content.length;j++){ oli[j].className=""; li_content[j].style.display='none' } li_content[this.index].style.display='block'; oli[this.index].className="active"; } } margin: 0px;padding: 0px} body{padding: 50px} ul {list-style-type: none;} #list{ height: 30px;line-height: 30px; margin-bottom: 2px } #list li{ width: 100px;text-align: center; border:1px solid green; background: rgba(100,50,20,0.2); float:left; cursor: pointer; } #content{ width: 304px;height: 150px; border:1px solid green;border-top: none; } #content div{display: none; } #content div.show{display: block;} #list li.active{ background: #fff; border-bottom: none; }  var $li=$('#list li') $li.click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('#content div').eq($li.index(this)).show().siblings().hide() }) })  height: 30px;line-height: 30px; margin-bottom: 2px }