- 浏览: 64779 次
文章分类
最新评论
-
小色帝:
我是天才是打发
Jquery实现的Tabs页 -
小色帝:
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝:
1111而温热
Jquery实现的Tabs页
前段时间做一个项目,其中界面部分要用到的tabs页签网上已经有很多很多现成的可以用,也用了下jquery-ui里面的tabs,感觉大了点,自己的需求并不复杂,还是自己动手写写吧,目的为了让html更干净点。
纯属记录自己写的东西,先来个图
<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">
555555555555555
</div>
</div>
样式
?.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;
}
jquery代码
?<script type="text/javascript">
$(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(); //显示选中项对应内容
});
});
</script>
简简单单,效果就达到了
//tabs插件-小色帝稍作改进
(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 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件,挺好用的,特意总结下 ... -
jquery常用事件(整理)
2017-02-13 17:47 227Jquery事件 (一)、事件 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1155开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 298这个标题似乎有些奇怪,但这些都是合法有效的jQuery选择器。 ... -
type="button" ,"submit" 的区别(转)
2016-07-22 11:16 448type="button" ,"submit" 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 385Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 496【简介】 zTree 是利用 jQuery 的核心代码,实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 394本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 390jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 296jQuery.data() 所属分类:数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 376jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 537Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树(组织结构)
2016-05-15 11:19 2891最近看到不少人有类似的需求,实现组织架构的横向展开,显示,无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 366http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1023<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 445jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5223HTML 首先引入Echarts,然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 530jQuery自定义类封装 jQuery自定义类封装: ( ... -
Jquery 选择器总结
2015-04-15 19:21 475jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 957工作半年了,接触的第一个项目就是SS为后台的框架的开发。 ...
相关推荐
不满意原来Jquery实现的tabs效果,使用Jquery-tabs实现的tabs。
jquery ui tabs 切换功能实现,jquery一个好用的例子
jquery实现的tab选项卡。非常简单。
基于jquery tabs切换源码,demo实现了不同的切换方式,代码精简值得参考
jquery ui tabs_jqgrid demo
jQuery有机Tabs选项卡,所谓有机Tabs,就是标签面板的内容的高度不同。当切换选项卡时,下面的内容是轻轻的向上或向下移动,不占用多余空间。
可动态添加tabs可实现jquery换肤
jQuery结合CSS实现简单Tabs选项卡效果
jquery tabs Jquery实现的Tabs页签
自己写的一个简单的tabs滑动特效,没有使用图片完全是jq+css实现的,稍微修改下,可以直接作为插件使用的
简易的jquery插件实现tab组件的切换。可自己编辑css改变样式。
一款非常不错的JQuery实现tabs选项卡的插件
jquery插件tabs,简单实用的小插件,实现tab页切换
jQuery超酷Tabs选项卡特效源码是一组非常实用的Tabs选项卡设计效果。这组选项卡同4之后效果,分别为基本选项卡,彩色带图标的选项卡,下划线样式选项卡和垂直选项卡。这些选项卡样式简洁大方,兼容IE8,非常实用。本...
轻松实现网页版的tab标签显示。 包含完整的js和css代码
jQuery实现个性动画彩色Tabs选项卡特效源码.zip
主要为大家详细介绍了基于jQuery实现Tabs选项卡自定义插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
easy ui.左边的导航,上面的tabs.页面的布局。实现点击导航动态添加tabs,tabs实现右击关闭,关闭其他,关闭左边所有,关闭右边所有。下载下来可以直接看效果