JQuery选项卡插件

最新推荐文章于 2022-11-14 15:31:33 发布

mdj280759843

最新推荐文章于 2022-11-14 15:31:33 发布

阅读量185

点赞数

分类专栏： JS 文章标签： jQuery JavaScript CSS json HTML ViewUI

本文链接：https://blog.csdn.net/mdj280759843/article/details/83708130

版权

JS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

/**
* @desc JQuery选项卡插件
* @author mengdejun
* @version 1.1.1
* @date 20100817
*/
(function($)
{
/**
* @desc 导航栏
* @param ids 选项卡层命名前缀 默认为tab
* @param cls 选项卡层通用类前缀 默认为tabcls
* @param def 默认显示选项卡序列号 默认为1
*/
$.fn.navTabs = function(ids,cls,def,effectClass)
{
   if(!ids||ids=="")ids="tab"
   if(!cls||cls=="")cls="tabcls";
   if(!def||def==0)def=1;
   if(!effectClass||effectClass==0)effectClass="selected";
   $("."+cls).hide();
   $("#"+ids+""+def).show();
   $(this).find("ul li").each(function(index,ele)
   {
    if(typeof($(ele).attr("name"))=="undefined")
    {
     $(ele).attr("name",(index+1));
    }
    if(index+1==def)$(ele).find("a").addClass(effectClass);
    $(ele).bind("click",function()
    {
     $("."+cls).hide();
     $(this).siblings().each(function(ind,el){$(el).find("a").removeClass(effectClass);});
     $(this).children("a").addClass(effectClass);
     $("#"+ids+$(this).attr("name")).show();
    });
});
};
/**
* @desc 滚动行函数
* @param cls 激活时采用的类
*/
$.fn.round=function(cls)
{
   $(this).bind("mouseover",function(){$(this).addClass(cls);});
   $(this).bind("mouseout",function(){$(this).removeClass(cls);});
};
/**
* @desc 单击事件绑定函数
* @param obj json对象(回调函数) 调用时候会传递当前对象至函数
* @example {doSelect:function(obj){}}
*/
$.fn.select=function(obj)
{
   $(this).bind("click",function(){if(obj)obj.doSelect(this);});
};
})(jQuery);

<html>
<head>
   <title>选项卡</title>
   <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
        <script type='text/javascript' src='Jquery.nav.js'></script>
   <style type='text/css'>
    @import url('menu.css');
   </style>
   <script type='text/javascript'>
    $(function()
        {
         $("#navMenu").navTabs('tab','tabClass',1,'selectedClass');
       });
   </script>
</head>
<body>
   <div id="container">
        <div id="navMenu">
            <ul>
                <li><a href="#">Menu1</a></li>
                    <li><a href="#">Menu2</a></li>
                    <li><a href="#">Menu3</a></li>
                    <li><a href="#">Menu4</a></li>
                </ul>
            </div>
            <div id="tab1" class="tabClass">
            111
            </div>
            <div id="tab2" class="tabClass">
            222
            </div>
            <div id="tab3" class="tabClass">
            333
            </div>
            <div id="tab4" class="tabClass">
            444
            </div>
        </div>
</body>
</html>

body{text-align:center;font-family:"Courier New", Courier, monospace;}
#container{width:60%;display:block;margin:0 auto;}
.tabClass{width:100%;clear:both;border:1px double #09F;text-align:left;height:180px;}
#navMenu{width:100%;text-align:left;float:left;}
#navMenu ul{float:left;}
#navMenu ul li{list-style:none;float:left;display:block;background:rgb(110,152,252);padding:5px 5px;}
#navMenu ul li a{text-decoration:none;padding:10px 10px;}
#navMenu ul li a:hover{color:#FFF;}
.selectedClass{background:#06F;}

mdj280759843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery选项卡插件

/*** @desc JQuery选项卡插件* @author mengdejun* @version 1.1.1* @date 20100817*/(function($){/*** @desc 导航栏* @param ids 选项卡层命名前缀默认为tab* @param cls 选项卡层通用类前缀默认为tabcls* @param def 默...
复制链接

扫一扫