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. Chrome浏览器扩展开发系列之十：桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  2. Android系统--输入系统（十三）Dispatcher线程情景分析_Reader线程传递事件

    Android系统--输入系统(十三)Dispatcher线程情景分析_Reader线程传递事件 1. 输入按键 我们知道Android系统的按键分为三类:(1)Global Key;(2)Syste ...

  3. 使用joda-time工具类 计算时间相差多少 天，小时，分钟，秒

    下面程序使用了两种方法计算两个时间相差 天,小时,分钟,秒 package jodotest; import java.text.ParseException; import java.text.Si ...

  4. A start job is running for xxx to stop

    CentOS7开机时,遇到这样的问题已经好多回了,查阅了许多这样的问题,总是没能找到自己想要的答案. 今天本来启动顺利,但是设置mysql.httpd服务开机启动之后,再次开机时又遇到这样的问题. 这 ...

  5. 第一章：selenium + java 环境安装

    1. 首先安装的是 jdk ,推荐安装的是   JDK 版本是 1.7 2.  安装 JDK 步骤: 第一步: 第二步: 第三步: 配置 JDK 环境变量,点击 我的电脑-右键-高级-环境变量. 第五 ...

  6. 关于springmvc配置validator的注意事项

    <mvc:annotation-driven validator="validator" /> 在使用springmvc整合hibernate-validator做表单 ...

  7. 51nod_1100:斜率最大

    题目链接 斜率最大点对横坐标必相邻 #include <bits/stdc++.h> using namespace std; ; struct point { int x, y, pos ...

  8. 【NOI复习】树链剖分

    简介 树链剖分通常用来解决一类维护静态树上路径信息的问题, 例如:给定一棵点带权树, 接下来每次操作会修改某条路径上所有点的权值(修改为同一个值或是同加上一个值等) , 以及询问某条路径上所有点的权值 ...

  9. 【无旋式treap】例题

    [bzoj3223]文艺平衡树 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[ ...

  10. HTML5的应用缓存

    HTML5:提供一种应用缓存机制,使得基于web的应用程序可以离线运行.开发者可以使用  Application Cache (AppCache)  接口设定浏览器缓存的数据并使得数据离线有效. 在处 ...