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					{378px; height:243px; overflow:hidden; float:left;}

	.index_mk_2nr				{padding-left:5px; padding-right:5px;}
	.m2tab 						{height:32px;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; 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>