最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于JQuery的Tab选项卡(实用例子)
时间:2016-03-27 编辑:简简单单 来源:一聚教程网
1.引入文件
css文件
@charset "utf-8";
/* 通用 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {margin: 0; padding: 0;}
fieldset, img {border: 0;}
abbr, acronym {border: 0; font-variant: normal;}
body {line-height: 1.5;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th {text-align: left;}
sup, sub {font-size: 100%; vertical-align: baseline;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
:link, :visited {text-decoration: none;}
:focus {outline: 0;}
body{ font-family: 'Microsoft YaHei'; background:#ccc;}
/*tab*/
.tab{ margin:10px auto;}
.tab .tab_menu{width:100%; border-bottom:#999 1px dotted;}
.tab .tab_menu ul li{float:left; background:#353744; line- font-size:14px; color:#fff; text-align:center; margin-right:3px; cursor:pointer;}
.tab .tab_menu li.selected {color:#ffea00; transition: all 0.3s ease 0s}
.tab .tab_box{font-size:12px; line- margin-top:1px; background:#eee; padding:5px 10px;}
.tab .tab_box .hidden{display:none;}
2.添加选项卡JS
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.hover(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li.index(this);
$("div.tab_box > div")
.eq(index).show()
.siblings().hide();
})
})
3.Tab结构
提示:
1.tab.js中$div_li.hover为鼠标经过事件,可更为click为鼠标点击事件
2.$(“div.tab_box > div”) 选取子节点,不选取子节点的话,如果里面还有div,会引起错误。
3.tab_menu li数量要与.tab_box > div数量对应。
-
下一个: jquery自定义美化的下拉选择框例子
相关文章
- jQuery实现移动端Tab选项卡效果 06-29
- jQuery实现tab选项卡和浮层兼容ie6 05-20
- jQuery 响应式 Tab 选项卡/手风琴代码 11-14
- jQuery Tab选项卡特效代码 08-28
- 漂亮的jQuery tab选项卡插件 08-24
- jQuery版TAB选项卡效果代码 06-15