使用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 21 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现简单QQ聊天框
Aug 27 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
jquery改变tr背景色的示例代码
2013/12/28 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
python实现simhash算法实例
2014/04/25 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
大学生自我评价范文分享
2014/02/21 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
世界读书日的活动方案
2014/08/20 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript