使用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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery实现购物车基本功能
Oct 25 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 文件上传功能实现代码
2009/06/24 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
input按钮的事件处理大全
2010/12/10 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
Linux常见面试题
2013/03/18 面试题
几个MySql的面试题
2013/04/22 面试题
什么是servlet
2012/05/08 面试题
自我评价个人范文
2013/12/16 职场文书
诚信考试标语
2014/06/24 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
党员三严三实心得体会
2014/10/13 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS