原创：编写jquery 选项卡插件

<!--选项开始-->

<div class="jgfangshi Lhk">

<ul class="jquser6" >

<li><a href="#">利好</a></li><li><a href="#">利空</a></li><li class="line2"> </li>

</ul>

</div><!--jgfangshi end-->

<div class="NR6-2">

<div class="list">

<ul>

<li><a href="#">需要控制一下字数</a></li>

<li><a href="#">阿胶权证又现“末日轮”炒作</a></li>

</ul>

</div><!--list end-->

</div><!--NR6-2 end-->

<div class="NR6-2">

<div class="list">

<ul>

<li><a href="#">阿胶权证又现“末日轮”炒作</a></li>

<li><a href="#">阿胶权证又现“末日轮”炒作</a></li>

</ul>

</div><!--list end-->

</div><!--NR6-2 end-->

<script type="text/javascript">

;(function($){

$.fn.extend({

'selItem':function(options){

options=$.extend({

curr_sel:'curr_class',

showHideClass:'class_name',

},options);

$('ul>li:first',this).addClass(options.curr_sel);

$(options.showHideClass).not( ':first' ).hide();

$( 'ul>li',this).unbind( 'click' ).bind( 'click', function(){

$(this).siblings('li').removeClass(options.curr_sel).end().addClass(options.curr_sel);

var index = $('ul>li').index($(this));

$(options.showHideClass).eq( index ).siblings(options.showHideClass).hide().end().show();

} );

return this;//返回this，使方法可链

}

})

})(jQuery);

$(function(){

$('.Lhk').selItem({

curr_sel:'curr3',

showHideClass:'.NR6-2'

});

})

</script>

<style>

body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; font-size:12px; color:#000;}

div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }

div{margin:0 auto;}

li{list-style-type:none;}

h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}

/* Link */

a{color: #000000 !important; text-decoration:none;}

a:visited {color: #83006f;text-decoration:none;}

a:hover {color: #bc2931; text-decoration:underline;}

a:active {color: #bc2931;}

/**MK2 start**/

.list{clear:both; margin-bottom:15px; width:234px;}

.list ul{padding:6px 0 0;}

.list li{text-align:left; line-height:20px; padding:0 0 0 11px; clear:both; background:url(../img/Fk1.jpg) 3px 7px no-repeat;}

.list .line{ border-top:1px dashed #ccc; height:4px; line-height:4px; font-size:4px;}

/**MK2 end**/

.jgfangshi{border:1px solid #c8c8c8; border-bottom:none; height:25px; line-height:25px; width:234px; font-size:12px; margin-top:30px;}

.jgfangshi li{ width:84px; height:25px; float:left;border-right:1px solid #c8c8c8;}

.jgfangshi li a{width:84px; height:25px; display:block;font-weight:bold; text-decoration:none; color:#F33!important;}

.jgfangshi li a:hover{color:#7f2531!important;width:84px; height:25px; display:block; background-color:#ffffff; position:relative; z-index:4}

.jgfangshi li.curr3,.jgfangshi li.curr3 a{color:#7f2531!important;width:84px; height:25px; display:block; background-color:#ffffff; position:relative; z-index:4}

.jgfangshi li.line2{height:1px; width:234px; line-height:1px; font-size:1px; top:-1px; font-size:13px;

border:none;background:#c8c8c8;clear:both; position:relative; z-index:2;}

/**MK7 end**/

.jgfangshi ul{clear:both; margin:0 auto;}

</style>
转载请注明： 雨中无伞

/article/4827151.html