jquery_tabs选项卡插件自己学习时候学的花了一下午事件有详细注释资源-CSDN文库

共5个文件

html：2个

js：2个

css：1个

jquery_tabs选项卡

jquery_tabs插件

jquery插件

4星 · 超过85%的资源需积分: 9 37 浏览量 2011-02-15 15:29:03 上传评论收藏 29KB RAR 举报

《jQuery Tabs 选项卡插件学习指南》在网页设计中，选项卡是一种常见的交互元素，用于组织和展示大量信息。jQuery_Tabs 插件是一个轻量级且功能强大的工具，能够帮助开发者轻松实现这种效果。本文将基于提供的学习资料，包括 StyleSheet.css、tabs.html、tabs1.html、jquery-1.4.4.min.js 和 JScript.js 文件，来详细解析这个插件的工作原理和使用方法，特别适合初学者入门学习。 1. **jQuery基础**：jQuery 是一个广泛使用的 JavaScript 库，简化了 DOM 操作、事件处理和动画。在本项目中，我们使用的是 jQuery 1.4.4 版本，这是早期的一个稳定版本，对于初学者来说，它是了解 jQuery 功能的好起点。 2. **CSS样式表** (StyleSheet.css)：选项卡的视觉效果主要由 CSS 控制。在这个文件中，你可以找到定义了选项卡样式和内容区域样式的规则，例如颜色、边框、字体、布局等。通过修改这些规则，可以定制选项卡的外观，以适应不同的设计需求。 3. **HTML结构** (tabs.html, tabs1.html)：HTML 文件提供了页面的基本结构。在 `tabs.html` 和 `tabs1.html` 中，你会看到一系列的 `<div>` 元素，它们分别代表了选项卡和对应的面板。每个选项卡都有一个唯一的 ID 或类名，用于 jQuery 选择器识别。 4. **JavaScript 实现** (JScript.js)：`JScript.js` 是包含 jQuery 选项卡插件实现的脚本文件。主要逻辑包括： - 初始化选项卡：使用 jQuery 的 `.tabs()` 方法初始化选项卡组件。 - 事件绑定：通过 `.click()` 方法监听选项卡的点击事件，当用户点击时，切换到对应的面板。 - 隐藏/显示内容：使用 `.hide()` 和 `.show()` 方法控制面板的可见性，根据选项卡的状态来决定哪个面板应被显示。 - 注释：代码中详尽的注释对理解每一步操作至关重要，帮助初学者逐步理解插件的工作流程。 5. **插件使用步骤**： a. 在 HTML 页面中引入 jQuery 库（如：`<script src="jquery-1.4.4.min.js"></script>`）。 b. 引入 CSS 样式表（如：`<link rel="stylesheet" href="StyleSheet.css">`）。 c. 编写选项卡的 HTML 结构。 d. 包含并执行 JScript.js 文件（如：`<script src="JScript.js"></script>`）。 e. 使用 jQuery 的 `.tabs()` 方法初始化选项卡。 6. **扩展与自定义**：jQuery_Tabs 插件通常允许自定义配置，如动画效果、激活选项卡的索引等。你可以通过传递参数到 `.tabs()` 方法来实现这些自定义设置。 7. **实际应用**：除了基本的选项卡功能，这个插件还可以应用于各种场景，如产品展示、新闻列表、用户评论等，以优化网页空间的利用和用户体验。通过以上内容，你应该对 jQuery_Tabs 选项卡插件有了全面的理解。实践中，不断调试和修改代码，结合注释深入探究，是提高技能的关键。同时，随着对 jQuery 更深入的学习，你会发现更多高级功能和技巧，可以进一步提升你的选项卡组件。

资源推荐

资源详情

资源评论

收起资源包目录

jquery_tabs选项卡.rar （5个子文件）

jquery-1.4.4.min.js 77KB

tabs1.html 937B

tabs.html 6KB

JScript.js 5KB

StyleSheet.css 620B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css"> .button{ width:150px; height:30px; line-height:30px;} .butselect{width:150px; height:30px; line-height:30px; background-color:#FFF;} .div{ width:500px; height:100px; background-color:Red; display:none;} .divselect{ width:500px; height:100px; background-color:Red;} .coloseselect{width:15px; height:30px; line-height:30px; background-color:#FFF;} .colose{width:15px; height:30px; line-height:30px; } .buttonh{ display:none;} </style> </head> <body> <button id="addnewtabs">增加新tabs</button> <div id="tabstest"> <button id="tabsm1" class="butselect" name="tabs">tabs1</button><button name="colose" id="tabsc1" class="coloseselect">x</button><button id="tabsm2" name="tabs" class="button">tabs2</button><button name="colose" id="tabsc2" class="colose">x</button><button id="tabsm3" name="tabs" class="button">tabs3</button><button name="colose" id="tabsc3" class="colose">x</button> </div><div id="tabsbody"> <div id="tabsb1" class="divselect" name="body" >tabsb1</div> <div id="tabsb2" class="div" name="body">tabsb2</div> <div id="tabsb3" class="div" name="body">tabsb3</div></div> </body><script type="text/javascript"> var x = 0; //定义一个全局变量用来存储tabs的当前的最大索引号 $("#addnewtabs").bind("click", function () { $("button[name='colose']").each(function () { var count = $(this).attr("id"); count = count.substr(count.length - 1, 1); count = count - 1 + 1; if (count > x) { x = count; } }) x = x + 1; var tabsm = "<button id=\"tabsm" + x + "\" class=\"butselect\" name=\"tabs\">tabs" + x + "</button>"; var tabsc = "<button name=\"colose\" id=\"tabsc" + x + "\" class=\"coloseselect\">x</button>"; var tabsb = "<div id=\"tabsb" + x + "\" class=\"divselect\" name=\"body\" >tabsb" + x + "</div>"; var oldm = $(".butselect").attr("id"); var oldc = $(".divselect").attr("id"); var oldb = $(".coloseselect").attr("id"); $("#" + oldm).removeClass(); $("#" + oldm).addClass("button"); $("#" + oldc).removeClass(); $("#" + oldc).addClass("div"); $("#" + oldb).removeClass(); $("#" + oldb).addClass("colose"); $("#tabsbody").append(tabsb); $("#tabstest").append(tabsm); $("#tabstest").append(tabsc); }) // $("#tabsm1").addClass("butselect"); $("button[name='tabs']").live("click", function () { // $("button").removeClass(); // $(this).addClass("butselect"); var x = $(this).attr("id"); x = x.replace(/tabsm/, ""); x = x - 1 + 1; // $(".div").addClass("div") // $(".div").children("#tabsb" + x).removeClass() // $("#tabsb" + x).addClass("divsetect") // alert(x); // var count = 0; // $("button[name='tabs']:visible").removeClass(); // $("div[name='body']:visible").removeClass(); // $("button[name='colose']:visible").removeClass(); $("button[name='colose']:visible").each(function () { var count = $(this).attr("id"); count = count.replace(/tabsc/, ""); count = count - 1 + 1; if (count == x) { $("#tabsb" + count).removeClass(); $("#tabsm" + count).removeClass(); $("#tabsc" + count).removeClass(); $("#tabsb" + count).addClass("divselect"); $("#tabsm" + count).addClass("butselect"); $("#tabsc" + count).addClass("coloseselect"); } else { $("#tabsb" + count).removeClass(); $("#tabsm" + count).removeClass(); $("#tabsc" + count).removeClass(); $("#tabsb" + count).addClass("div"); $("#tabsm" + count).addClass("button"); $("#tabsc" + count).addClass("colose"); } }); }) $("button[name='colose']").live("click", function () { var x = $(this).attr("id"); x = x.replace(/tabsc/, ""); x = x - 1 + 1; $("#tabsm" + x).remove(); $("#tabsc" + x).remove(); $("#tabsb" + x).remove(); var y = 0; $("button[name='colose']:visible").each(function () { var count = $(this).attr("id"); count = count.replace(/tabsc/, ""); count = count - 1 + 1; if (count != x && y == 0) { $("#tabsb" + count).removeClass(); $("#tabsm" + count).removeClass(); $("#tabsc" + count).removeClass(); $("#tabsb" + count).addClass("divselect"); $("#tabsm" + count).addClass("butselect"); $("#tabsc" + count).addClass("coloseselect"); y++; } else { $("#tabsb" + count).removeClass(); $("#tabsm" + count).removeClass(); $("#tabsc" + count).removeClass(); $("#tabsb" + count).addClass("div"); $("#tabsm" + count).addClass("button"); $("#tabsc" + count).addClass("colose"); } }) }) </script> </html>

评论收藏

内容反馈