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">
 <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框的更多相关文章

  1. jQuery实现简单的tab切换

    html: <section>   <nav id="nav">     <a class="on">tab1</a& ...

  2. jquery实现简单的Tab切换菜单

    实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li c ...

  3. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  4. 【Little Demo】从简单的Tab标签到Tab图片切换

    Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...

  5. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  6. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  7. HTML简单的提示框

    由于项目中需要一个简单的提示框,就是鼠标放上去,可以提示相关信息,引用第三方的比较麻烦,所以,这里封装了一个很简单的HTML方法. <script src="http://cdn.st ...

  8. jquery删除添加输入文本框

    效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...

  9. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

随机推荐

  1. CSS3-loading动画（三）

    分享继续,图片看得不真切 在线演示demo:http://liyunpei.xyz/loading.html 十一.效果十一 四个小球分别包含于四个正方形div,将小球相对于正方形定位(top:0:l ...

  2. 如何禁用 .net reflector

    在 工具--->扩展管理器-->禁用

  3. C/C++中const关键字的用法及其与宏定义的比较

    1.const关键字的性质 简单来说:const关键字修饰的变量具有常属性. 即它所修饰的变量不能被修改. 2.修饰局部变量 ; ; 这两种写法是等价的,都是表示变量的值不能被改变,需要注意的是,用c ...

  4. Memcached的安装与使用

    这一段折腾了下Memcached,有所收获吧,记录一下. 1.什么是Memcached memcached是一种缓存技术, 他可以把你的数据放入内存,从而通过内存访问提速,因为内存最快的, memca ...

  5. 基于layUI实现前端分页功能

    一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...

  6. 浅谈Nginx负载均衡原理与实现

    1.Nginx能做什么? Nginx可以两件事: -- HTTP请求  经过官方测试Nginx可以承受5万的并发量.可用来做静态资源的图片服务器 --负载均衡,如下解释什么是负载均衡. 2.负载均衡 ...

  7. FreeRTOS源代码的编程标准与命名约定

    编程标准 (Coding Standard) FreeRTOS 源代码遵守 MISRA (Motor Industry Software Reliability Association) 规范. 与 ...

  8. 中国剩余定理（CRT）与欧拉函数[数论]

    中国剩余定理 ——!x^n+y^n=z^n 想必大家都听过同余方程这种玩意,但是可能对于中国剩余定理有诸多不解,作为一个MOer&OIer,在此具体说明. 对于同余方程: x≡c1(mod m ...

  9. Work 3(工作类) (2017.07.01)

  10. Linux系统运维工程该具备哪些素质

    记得在上高中时,物理老师总是会对我们一句话:"学习是件苦差事."工作后发现,其实做运维也是件苦差事.最为一名运维工程师,深知这一行的艰辛,但和IT行业其他职务一样,那就是付出的越多 ...