1、新建文件，引入js，创建ul列表
3、效果如图
5、将这些内容包含在一个大的div里面，并且隐藏起来出来第一个div的内容
7、效果如图，没有滑过效果
9、js创建li鼠标滑过的效果
12、如图附上源码，<title>js常用的选项卡特效</title><script src="jquery.min.js"></script></head><style>*{margin:0; padding:0;}ul,li{list-style:none;}.cp_qie{width:980px; height:40px; border-bottom:1px solid #398710; margin:10px auto;}.cp_qie ul li{ width:100px; height:38px; line-height:38px; float:left; text-align:center;}.oon{ color:#fff; background:#4b9416 !important;}.hidden{display:none;}.last_box{width:980px; height:100px; margin:0px auto;}</style><script>$(document).ready(function(){ var $tab_li = $('.cp_qie ul li'); $tab_li.hover(function(){ $(this).addClass('oon').siblings().removeClass('oon'); var index = $tab_li.index(this); $('div.last_box > div').eq(index).show().siblings().hide(); }); });</script><body><div class="cp_qie"> <ul> <li class="oon">产品介绍</li> <li>产品质检</li> <li>证书COA</li> <li>产品MSDS</li> <li>参考文献</li> </ul></div><div class="last_box"> <div> 产品介绍的内容 </div> <div class="hidden"> 产品质检的内容 </div> <div class="hidden"> 证书COA的内容 </div> <div class="hidden"> 产品MSDS的内容 </div> <div class="hidden"> 参考文献的内容 </div></div></body>
