/**
* @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;}
分享到：
相关推荐
JQuery选项卡插件的基本原理是利用CSS隐藏和显示不同的内容区域，通过监听用户交互（如点击按钮）来切换这些内容。通常，每个选项卡对应一个内容区域，初始时只有一个内容区域是可见的，其他则被隐藏。当用户点击...
标题中的“可以无限增加和华丽滚动的jquery选项卡插件”指的是一个基于jQuery库的UI组件，它允许用户创建能够无限滚动的选项卡界面。这种插件通常用于展示大量内容，如新闻、产品目录或者用户反馈，使得用户可以通过...
在网页设计中，jQuery选项卡插件是一种常用的交互元素，用于组织和展示多部分内容，而无需用户滚动或点击多个页面。这种技术通过简洁的UI设计提供了高效的信息浏览体验，尤其适用于内容丰富的网站和应用。本篇文章将...
此作品是一款功能非常强大的jquery选项卡插件 此版本是一个测试版 但功能已经相当的强大了 效果已经非常棒了 页面上使用的代码也非常简单 jquery插件代码也不多 每个小功能还写好了注释 方便网友们学习 多的就不一一...
FengTab jQuery 选项卡插件
**jQuery选项卡插件概述** 在网页设计中，选项卡是一种常见的交互元素，用于组织和展示大量信息。jQuery，一个广泛使用的JavaScript库，提供了一系列插件来简化这种交互设计，如"multipurpose_tabcontent"。这款插件...
6. **兼容性**：考虑到浏览器兼容性，好的jQuery选项卡插件应能在主流浏览器上正常工作，包括Chrome、Firefox、Safari、Edge和Internet Explorer。 在压缩包内的文件中，我们可以期待找到以下组成部分： - **...
FengTab 是一个选项卡插件，...最近学习 jQuery ，感觉 jQuery 奥妙无穷，虽然网上有无数优秀的选项卡插件，但是我还是希望能用自己的逻辑来写一个，作为练习。 结果居然写得不错，因此冒昧放到网上来给大家乐呵乐呵。
考虑到浏览器兼容性，jQuery选项卡插件通常能良好地运行在主流的现代浏览器上，包括Chrome、Firefox、Safari、Edge以及较新的IE版本。然而，对于旧版浏览器，可能需要检查并解决潜在的兼容性问题。 10. **社区支持...
- **js**：这个文件夹包含了JavaScript代码，包括jQuery库和可能的自定义脚本，如选项卡插件的核心功能实现和配置设置。 在实际应用中，开发者需要在`index.html`中引入jQuery库和选项卡插件的JS文件，并根据需求...
《jQuery Tabs 选项卡插件学习指南》 在网页设计中，选项卡是一种常见的交互元素，用于组织和展示大量信息。jQuery_Tabs 插件是一个轻量级且功能强大的工具，能够帮助开发者轻松实现这种效果。本文将基于提供的学习...
### 三、使用JQuery选项卡插件步骤 1. **引入资源**：在HTML文档的`<head>`标签内引入JQuery库（如jQuery-1.x.x.min.js）和插件文件（如tabs.js）。 2. **HTML布局**：设置好选项卡的基本HTML结构，包括触发选项卡...
这款jQuery选项卡插件利用这一特性，使选项卡可以根据容器的大小进行弹性伸缩，确保在任何设备上都保持整洁的布局。 插件的简单性体现在两个方面：一是代码结构清晰，易于理解和定制；二是样式可以通过CSS来控制，...
"jquery.benma.tab"这个压缩包文件可能包含了一个名为"benma"的开发者编写的jQuery选项卡插件，特别地，它支持将内容嵌入到iFrame中，这样可以在选项卡之间加载不同的页面或内容。 ### jQuery选项卡基础 jQuery...
**基于jQuery的选项卡插件**是Web开发中常见的交互元素，主要用于展示多组内容，通过切换选项卡来实现不同内容的显示与隐藏。在网页设计中，它能有效地组织和展示信息，提高用户体验。本插件是作者在学习过程中实践...
总的来说，制作一个jQuery选项卡切换插件需要对HTML、CSS和jQuery有深入的理解。通过熟练运用这些技术，你可以创建出功能丰富、用户体验优秀的滑动选项卡组件。在学习过程中，不断实践和优化代码，将有助于提升你的...
“OrganicTabs”是压缩包中的文件名，很可能是一个具体的jQuery选项卡插件或者示例代码。这个命名暗示着该选项卡实现可能注重自然、流畅的动画效果，就像自然界中的变化一样平滑。 OrganicTabs可能包含了HTML结构、...
1. JavaScript文件：包含jQuery选项卡插件的核心代码，可能命名为“jquery.tabs.js”或其他类似名称。 2. CSS文件：提供插件的默认样式，通常名为“tabs.css”。 3. HTML示例文件：演示如何在网页中使用插件，可能...