使用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用noConflict代替$的实现方法
Apr 12 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery 验证用户名是否重复代码实例
May 14 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
简单的cookie计数器实现源码
2013/06/07 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue计算属性的使用
2017/08/04 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
Python FTP操作类代码分享
2014/05/13 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python如何调用百度识图api
2020/09/29 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
毕业生就业意向书
2014/04/01 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js