jq 滑块的应用
<script type="text/javascript"> $(document).ready(function(){ $("a.tab2").click(function () {index_mo(this,'ave2','m2tab_nr')}); /*首先获取a下面的class 然后点击事件 移除第一个带有特殊样式的class 然重新载入一个不带特殊样式的class 也就是移除一个class重新添加一个class。 隐藏所有内容 然后重新获取当前class下面的rel值 展开 也就是说 点击谁。所获得rel值就是内容id 所要展示的内容*/ function index_mo(im,ave,nr){ $("."+ave).removeClass(ave);//移除active class $(im).addClass(ave);//当前重新加入 active class $("."+nr).hide();//内容隐藏 var nrshow = $(im).attr("rel");//返回当前title值也就是content_1~3 $("#"+nrshow).fadeIn(); //找到id展开 } }); </script>
<style> /*---滑块_2---------*/ .index_mk_2 {width:378px; height:243px; overflow:hidden; float:left;} .index_mk_2nr {padding-left:5px; padding-right:5px;} .m2tab {height:32px;width:100%; } .m2tab li {margin-left:5px;float:left;height:32px;line-height:32px;} .m2tab li span { font-weight:bold; color: #0084BF; font-size:14px;} .m2tab li a { color: #0084BF;display: block; width:63px; text-align:center;cursor:pointer;} .m2tab li a.ave2 {background:url(../images/mok_bj1.jpg) center no-repeat;color: #FFF;} .m2tab_nr { display:none;} /*----滑块end--------------*/ </style>
<div class="index_mk_2 bian"> <div class="M_Top"> <ul class="m2tab"> <li><a rel="tab_1" class="tab2 ave2">标题一</a></li> <li><a rel="tab_2" class="tab2">标题二</a></li> </ul> </div> <div class="index_mk_2nr"> <div id="tab_1" class="m2tab_nr" style="display:block;"> 内容一 </div> <div id="tab_2" class="m2tab_nr"> 内容二 </div> </div> </div>