使用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操作DOM_动力节点Java学院整理
Jul 04 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
经验几则 推荐
2006/09/05 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
javascript json2 使用方法
2010/03/16 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python实现数据写入excel表格
2018/03/25 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Python之多进程与多线程的使用
2021/02/23 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
《桥》教学反思
2014/04/09 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
医院合作意向书范本
2015/05/08 职场文书
我的收音机情缘
2022/04/05 无线电