使用jQuery实现简单的tab框实例


Posted in jQuery onAugust 22, 2017

html代码

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>实现简单的tab框</title>
 <link rel="stylesheet" href="css/tabDemo.css" rel="external nofollow" >
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/tabDemo.js"></script>
</head>
<body>
 <ul class="main">
 <li class="style1">休闲装</li>
 <li>名媛</li>
 <li>运动服</li>
 </ul>
 <ul class="sublevel">
 <li class="style2">女装 男装 童装</li>
 <li>甜美风 文艺风</li>
 <li>运动男 运动女</li>
 </ul>
</body>
</html>

css代码

* {
 margin: 0;
 padding: 0px;
}
ul {
 width: 300px;
 margin: 10px auto;
}
ul li {
 list-style: none;
}
.main li {
 text-align: center;
 float: left;
 padding: 5px;
 margin-left: 10px;
 width: 80px;
 cursor: pointer;
 background-color: #f3f2e7;
}
.main .style1 {
 width: 50px;
 font-weight: bold;
 background-color: #f3f2e7;
 border: 1px solid #837979;
 border-bottom: 0;
 z-index: 100;
 position: relative;
}
.sublevel {
 width: 260px;
 height: 80px;
 padding: 19px;
 background-color: #f3f2e7;
 clear: left;
 border: 1px solid #837979;
 position:relative;
 top: -1px;
}
.sublevel li{
 display: none;
}
.sublevel .style1{
 display: block;
}

jquery代码

$(function () {
 //页面打开时 呈现的效果
 $(".sublevel li:eq(0)").show();
 //each遍历输出
 $(".main li").each(function(index) {
  //click 点击
  $(this).click(function() {
    //addClass()增加当前样式      removeClass()移除除当前点击之外的同级样式
   $(this).addClass("main style1").siblings().removeClass("style1");
   $(".sublevel li:eq("+index+")").show().siblings().hide();
  })
 })
})

以上这篇使用jQuery实现简单的tab框实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
jQuery实现表格冻结顶栏效果
Aug 20 #jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
简单实现jQuery轮播效果
Aug 18 #jQuery
You might like
php生成xml简单实例代码
2009/12/16 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
Python实现视频下载功能
2017/03/14 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
django解决订单并发问题【推荐】
2019/07/31 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Python中的面向接口编程示例详解
2021/01/17 Python
澳大利亚百货公司:David Jones
2018/02/08 全球购物
德国富尔达运动鞋店:43einhalb
2020/12/25 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
总经理聘用协议书
2015/09/21 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python