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. JavaScript 第一课

    今天进入到了js的阶段,了解到了JavaScript是一个很重要的阶段,所以要好好的理清每一个知识点 JavaScript的使用:   在<head>标签里应用<script> ...

  2. Jenkins的安装配置

    Jenkins的安装配置 一.Jenkins简介 Jenkins 是一个可扩展的持续集成引擎.Jenkins可以帮我们将代码进行统一的编译打包.还可以放到tomcat容器中进行发布.简单来说就是我们通 ...

  3. Java IO设计模式（装饰模式与适配器模式）

    01. 装饰模式 1. 定义 Decorator装饰器,就是动态地给一个对象添加一些额外的职责,动态扩展,和下面继承(静态扩展)的比较.因此,装饰器模式具有如下的特征: 它必须持有一个被装饰的对象(作 ...

  4. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  5. 《JavaScript高级程序设计》 -- 变量、作用域和内存问题（二）

    1.基本类型与引用类型 基本类型:值保存在变量中 (Number.String.Boolean.Undefined.Null).在内存中占据固定大小空间,被保存在栈内存中 引用类型:值是保存在内存中的 ...

  6. USB的前世今生

    在人类的历史长河中,很少有一种技术或者传输标准能像USB那样跟我们的生活息息相关,甚至到了没有不行的地步.USB对于今天的人们来说,就好像是空气,是水,是我们每天必需但是又熟视无睹的东西,没有多少人知 ...

  7. 使用Vue-resource完成交互

    使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始 ...

  8. Android后门GhostCtrl，完美控制设备任意权限并窃取用户数据

    Android系统似乎已经成为世界各地病毒作者的首选目标,每天都有新的恶意软件在感染更多的设备. 这一次,安全公司趋势科技发布警告,他们发现了一个新的Android后门--GhostCtrl Ghos ...

  9. 函数响应式编程及ReactiveObjC学习笔记 (三)

    之前讲了RAC如何帮我们实现KVO / 代理 / 事件 / 通知 今天先不去分析它的核心代码, 我们先看看ReactiveObjC库里面一些特别的东西,  如果大家点开ReactiveObjC目录应该 ...

  10. FFT_ad采样速率

    调用quartus的ip核测量频率和幅值,可以把程序分成四大部分.第一部分是AD采样模块,本次实验用的是ad828,最高采样率为70M, 根据奈贵斯特采样定律 Fs > 2Fc,即采样率要大于信 ...