标签：
从最简单的效果开始写起，一个简单的JQ写出tab切换效果，很静态，没有任何的轮转特效，单纯的点击标签显示区域块。
附上代码：
HTML：
<div class="wrapper"> <div class="tab"> <div class="tabtt"> <ul class="clearfix"> <li class="current"> <a href="javasrcipt:;">标题1</a> </li> <li> <a href="javasrcipt:;">标题2</a> </li> <li> <a href="javasrcipt:;">标题3</a> </li> </ul> </div> <div class="tabcon"> <div class="con" style="display: block;"> 我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。我是内容我是内容，对应标题1的内容。这就是个内容介绍。 </div> <div class="con"> 我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。我是内容我是内容，对应标题2的内容。这就是个内容介绍。 </div> <div class="con"> 我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。我是内容我是内容，对应标题3的内容。这就是个内容介绍。 </div> </div> </div> </div>
CSS如下：
<style type="text/css"> a{color: #000;} .tab{ position: relative; width: 300px; margin: 20px auto; } .tabtt{ position: relative; z-index: 50; } .tabtt li{ float: left; margin-right: 5px; } .tabtt li a{ display: block; height: 30px; line-height: 30px; padding: 0 15px; border:1px solid #d3d3d3; background: #eee; color: #999; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; } .tabtt li a:hover,.tabtt li.current a{ color: #000; background: #fff; border-bottom:1px solid #fff; } .tabcon{ position: relative; padding: 10px; margin-top: -1px; border:1px solid #d3d3d3; } .con{ display: none;} </style>
P.S.每个人都有自己的公用的CSS，所以一些的公用的CSS 在这里没有体现，需要自己填写。例如li的list-style属性等。
最讨人喜欢的JQ来了：
<script type="text/javascript"> $(function(){ $(".tabtt ul li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); $(".con").hide().eq($(".tabtt ul li").index(this)).show(); }); }); </script>
一向记不住语法的我Mark一下，说不定这次就记住了呢。(*^__^*)
标签：
原文地址：http://www.cnblogs.com/rainy0496/p/4760633.html
