原创：编写jquery 选项卡插件

<div class="jgfangshi Lhk">
    <ul class="jquser6" >
         <li><a href="#">利好</a></li><li><a href="#">利空</a></li><li class="line2"> </li>
    </ul>
</div>
<div class="NR6-2">
    <div class="list">
        <ul>
            <li><a href="#">需要控制一下字数</a></li>
            <li><a href="#">阿胶权证又现“末日轮”炒作</a></li>
        </ul>
    </div>
</div>
<div class="NR6-2">
    <div class="list">
        <ul>
            <li><a href="#">阿胶权证又现“末日轮”炒作</a></li>
            <li><a href="#">阿胶权证又现“末日轮”炒作</a></li>
        </ul>
    </div>
</div>

;(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>

/* 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

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2011/12/13/2286876.html

原创：编写jquery 选项卡插件相关推荐

jquery 选项卡插件
2019独角兽企业重金招聘Python工程师标准>>> KandyTabs 选项卡插件 html标准化结构,自动智能生成相应样式 http://demo.jgpy.cn/kandyT ...
【部分原创】jquery图表插件flot笔记
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
学习jquery选项卡插件
(function($){ $.fn.tabPlugins=function(options){ var seting={ event:"mouseover", //事件 LiCl ...
自己编写jQuery插件之表单验证
自己编写jQuery插件之表单验证吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...
漂亮的jQuery tab选项卡插件
清远大学城网(http://www.qydxc.com) tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项 ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
超强1000个jquery极品插件！（连载中。。。。最近更新20100127）
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书二手书特价书旧书网 (2)jQuery-Horizont ...
超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...

原创：编写jquery 选项卡插件

原创：编写jquery 选项卡插件相关推荐

最新文章

热门文章