jquery选项卡插件
把选项卡整合了一下,写成个插件,这样可以整个站,或整个页面有多个选项卡时,统一调用。代码的具体注意事项已经写进注释了。用于js获取元素的class名称必须有,选项卡本身的样式,另再取一个名字来设置(本人不大喜欢用id,一般写js代码也用class名称来获取元素)。这样也在一定意义上实现了行为和样式的分离。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> /*CSS源代码*/ /*必须设置的*/ .jsTab_con{ display:none;} .jsTab_title span{ cursor:pointer;} .jsTab_title .jsTab_this{ background:#096;} /*选项卡的样式*/ .js_tab{ width:900px; margin:30px auto 0; border:1px solid #0C9;} .js_tab h2{ font-weight:normal; height:40px; line-height:40px; text-align:center;} .js_tab h2 span{ display:inline-block; width:270px; margin:0 10px; background:#0CF; color:#fff;} .jsTab_con{ width:848px; height:200px; border:1px solid #09C; margin:0 auto 20px;} /*其他样式,可忽略*/ .cen{ text-align:center;} </style> </head> <body> <!-- HTML代码片段中请勿添加<body>标签 //--> <h3 class="cen">页面选项卡统一调用</h3> <p class="cen">结构的标签可改,改成div,ul,li等等都可以,但结构和class不能变。而且.jsTab_title里面最好是span,否则需要修改插件的相应内容。</p> <!--第一个选项卡--> <div class="js_tab box1"> <h2 class="jsTab_title"><span>标题11</span><span>标题12</span><span>标题13</span></h2> <div class="jsTab_con"> 内容11 </div> <div class="jsTab_con"> 内容12 </div> <div class="jsTab_con"> 内容13 </div> </div> <!--第二个选项卡--> <div class="js_tab box2"> <h2 class="jsTab_title"><span>标题21</span><span>标题22</span><span>标题23</span></h2> <div class="jsTab_con"> 内容21 </div> <div class="jsTab_con"> 内容22 </div> <div class="jsTab_con"> 内容23 </div> </div> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <script> /*Javascript代码片段*/ $(document).ready(function(){ //使选项卡的第一项显示,必须加入 var tabs=$(".js_tab"); tabs.each(function(){ $(this).find(".jsTab_title span").first().addClass("jsTab_this"); $(this).find(".jsTab_con").first().show(); }); //调用,不能用本身的js_tab调用,需另起一个class或id $(".box1").js_tab(); $(".box2").js_tab(); }); //选项卡插件 ;(function($){ $.fn.extend({ "js_tab":function(){ $(this).find(".jsTab_title span").each(function(index){ $(this).click(function(){ $(this).siblings("span").removeClass("jsTab_this"); $(this).addClass("jsTab_this"); var tab_c=$(this).parents(".js_tab").find(".jsTab_con"); tab_c.hide(); tab_c.eq(index).show(); }); return $(this); }); } }); })(jQuery); </script> </body> </html>
.
相关推荐
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示例文件:演示如何在网页中使用插件,可能...