使用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实现瀑布流页面
Apr 11 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
php include,include_once,require,require_once
2008/09/05 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
javascript的delete运算符知识点总结
2019/11/19 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python实现随机漫步方法和原理
2019/06/10 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python代码能做成软件吗
2020/07/24 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
厨师个人自我鉴定范文
2014/04/19 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
关于python爬虫应用urllib库作用分析
2021/09/04 Python
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js