jquery实现的Tabs切换
2014-01-17 13:56
337 查看
第一步:HTML
第二步:.CSS代码
<div class="tabs"> <ul id="tabs"> <li class="tab-nav">管理导航</li> <li class="tab-nav-action">系统设置</li> <li class="tab-nav">用户管理</li> <li class="tab-nav">内容管理</li> <li class="tab-nav">其他管理</li> </ul> </div> <div id="tabs-body" class="tabs-body"> <div style="display:block"> 1111111 </div> <div style="display:none"> 222222222 </div> <div style="display:none"> 33333333333 </div> <div style="display:none"> 4444444444 </div> <div style="display:none"> http://yige.org 555555555555555 </div> </div>
第二步:.CSS代码
.tabs { float:left; background-image: url(themes/images/nav_bg.jpg); width:100%; } .tabs ul { list-style: none outside none; margin: 0; padding: 0; } .tabs ul li { float: left; line-height: 24px; margin: 0; padding: 2px 20px 0 15px; } .tab-nav{ background: url(themes/images/manage_r2_c14.jpg) no-repeat; cursor:pointer; } .tab-nav-action{ background: url(themes/images/manage_r2_c13.jpg) no-repeat; cursor:pointer; } .tabs-body { border-bottom: 1px solid #B4C9C6; border-left: 1px solid #B4C9C6; border-right: 1px solid #B4C9C6; float: left; padding: 5px 0 0; width: 100%; } .tabs-body div { padding:10px; }第三步:JS 代码
$(document).ready(function () { $("#tabs li").bind("click", function () { var index = $(this).index(); var divs = $("#tabs-body > div"); $(this).parent().children("li").attr("class", "tab-nav");//将所有选项置为未选中 $(this).attr("class", "tab-nav-action"); //设置当前选中项为选中样式 divs.hide();//隐藏所有选中项内容 divs.eq(index).show(); //显示选中项对应内容 }); });第四步:封装与调用
//tabs插件-jackin稍作改进 (function ($) { $.fn.extend({ qmTabs: function () { var aTabBodys = $('#tabs-body > div'); $(this).children("li").each(function (index) { $(this).click(function () { $(this).removeClass().addClass('tab-nav-action').siblings().removeClass().addClass('tab-nav'); aTabBodys.hide().eq(index).show(); }); }); } }); })(jQuery);
$(document).ready(function () { $("#tabs").qmTabs(); });
相关文章推荐
- jQuery MiniUI
- 项目视频讲解_基于J2EE+JBPM3.xJBPM4.3+Flex流程设计器+Jquery+授权认证)企业普及版贝斯OA与工作流系统
- jQuery校验
- Jquery html<table>数据行的添加和删除
- Jquery与C#跳出each循环
- Jquery学习之路(二) 实现table样式的设定
- ztree + jQuery 动态加载树。
- jQuery Ajax 动态加载checkbox,在table里分两列加载。
- jQuery ajax 通过get方式实现
- jQuery/CSS3最新插件应用
- jquery ui日历中文化
- jQuery 浮动标签插件,帮助你提升表单用户体验
- jquery 对radio的操作
- Jquery 获取对象的几种方式介绍
- 如何创建一个自定义jQuery插件
- JQuery - Hello World
- JQuery - $, JQuery, Window.load, JQuery.ready
- JQuery - Table中行斑马线设置
- Jquery操作单选按钮(Radio)的取值赋值实现代码
- JQuery 入门指南(8):解决$的冲突