jquery选项卡插件

最新推荐文章于 2024-08-06 12:58:11 发布

chenxian2977

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量83

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/mengdejun/blog/9437

版权

1./**  
2.* @desc JQuery选项卡插件  
3.* @author mengdejun  
4.* @version 1.1.1  
5.* @date 20100817  
6.*/  
7.(function($)   
8.{   
9./**  
10.* @desc 导航栏  
11.* @param ids 选项卡层命名前缀 默认为tab  
12.* @param cls 选项卡层通用类前缀 默认为tabcls  
13.* @param def 默认显示选项卡序列号 默认为1  
14.*/  
15.$.fn.navTabs = function(ids,cls,def,effectClass)   
16.{   
17.   if(!ids||ids=="")ids="tab"  
18.   if(!cls||cls=="")cls="tabcls";   
19.   if(!def||def==0)def=1;   
20.   if(!effectClass||effectClass==0)effectClass="selected";   
21.   $("."+cls).hide();   
22.   $("#"+ids+""+def).show();   
23.   $(this).find("ul li").each(function(index,ele)   
24.   {   
25.    if(typeof($(ele).attr("name"))=="undefined")   
26.    {   
27.     $(ele).attr("name",(index+1));   
28.    }   
29.    if(index+1==def)$(ele).find("a").addClass(effectClass);   
30.    $(ele).bind("click",function()   
31.    {   
32.     $("."+cls).hide();   
33.     $(this).siblings().each(function(ind,el){$(el).find("a").removeClass(effectClass);});   
34.     $(this).children("a").addClass(effectClass);   
35.     $("#"+ids+$(this).attr("name")).show();   
36.    });   
37.});   
38.};   
39./**  
40.* @desc 滚动行函数  
41.* @param cls 激活时采用的类  
42.*/  
43.$.fn.round=function(cls)   
44.{   
45.   $(this).bind("mouseover",function(){$(this).addClass(cls);});   
46.   $(this).bind("mouseout",function(){$(this).removeClass(cls);});   
47.};   
48./**  
49.* @desc 单击事件绑定函数  
50.* @param obj json对象(回调函数) 调用时候会传递当前对象至函数  
51.* @example {doSelect:function(obj){}}  
52.*/  
53.$.fn.select=function(obj)   
54.{   
55.   $(this).bind("click",function(){if(obj)obj.doSelect(this);});   
56.};   
57.})(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;}

转载于:https://my.oschina.net/mengdejun/blog/9437

chenxian2977

关注

0
点赞
踩
0

收藏

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

1./** 2.* @desc JQuery选项卡插件 3.* @author mengdejun 4.* @version 1.1.1 5.* @date 20100817 6.*/ 7.(function($) 8.{ 9./** ...
复制链接

扫一扫