原创：编写jquery 选项卡插件

<!--选项开始-->
 <div class="jgfangshi Lhk">
    <ul class="jquser6" >
         <li><a href="#">利好</a></li><li><a href="#">利空</a></li><li class="line2">&nbsp;</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>

转载请注明： 雨中无伞

http://www.cnblogs.com/yuzhongwusan/archive/2011/12/13/2286876.html