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示例文件：演示如何在网页中使用插件，可能...