<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0px;

                 padding: 0px;

                 list-style: none;

             }

             h2 {

                 margin-bottom: 20px;

                 background: #ccc;

                 display: inline-block;

             }

             h2 span {

                 background: blue;

                 display: inline-block;

                 width: 80px;

                 height: 40px;

                 text-align: center;

                 cursor: pointer;

             }

             div {

                 width: 600px;

                 height: 200px;

                 border: 2px solid blue;

                 overflow: hidden;

                 position: relative;

             }

             ul {

                 width: 600px;

                 position: absolute;

                 left: 0px;

                 transition: 0.2s linear;

             }

             ul li {

                 width: 200px;

                 height: 200px;

                 background: #eee;

                 float: left;

             }

             ul li:nth-child(even) {

                 background-color: green;

             }

             ul.sh {

                 display: block;

             }

             ul.hd {

                 display: none;

             }

             span.disable {

                 background: #ccc;

                 color: #eee;

                 cursor: default;

             }

         </style>

     </head>

     <body>

         <section id="s1">

             <h2><span>家电</span> | <span class="disable">手机</span> | <span class="disable">笔记本</span>| <span class="disable">西瓜</span> </h2>

             <div>

                 <ul class="sh">

                     <li>家电</li>

                     <li>BB</li>

                     <li>CC</li>

                 </ul>

                 <ul class="hd">

                     <li>手机</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

                 <ul class="hd">

                     <li>笔记本</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

                 <ul class="hd">

                     <li>西瓜西瓜</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

             </div>

         </section>

         <hr />

         <section id="s2">

             <h2><span>奶粉</span> | <span class="disable">奶油</span> | <span class="disable">奶酪</span> </h2>

             <div>

                 <ul class="sh">

                     <li>奶粉</li>

                     <li>BB</li>

                     <li>CC</li>

                 </ul>

                 <ul class="hd">

                     <li>奶油</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

                 <ul class="hd">

                     <li>奶酪</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

             </div>

         </section>

         <section id="s3">

             <h2><span>箱包</span> | <span class="disable">香水</span> | <span class="disable">香料</span> </h2>

             <div>

                 <ul class="sh">

                     <li>箱包</li>

                     <li>BB</li>

                     <li>CC</li>

                 </ul>

                 <ul class="hd">

                     <li>香水</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

                 <ul class="hd">

                     <li>香料</li>

                     <li>EE</li>

                     <li>FF</li>

                 </ul>

             </div>

         </section>

         <script>

             function SN(_id) {

                 var btn = document.querySelectorAll(_id + " span");

                 var uls = document.querySelectorAll(_id + " ul");

                 for(var i = 0; i < btn.length; i++) {

                     btn[i].index = i;

                     btn[i].onmouseover = function() {

                         ini()

                         //让当前选项卡亮色

                         this.className = ""

                         uls[this.index].className = "sh";

                     }

                 }

                 function ini() {

                     for(var i = 0; i < btn.length; i++) {

                         btn[i].className = "disable"

                         uls[i].className = "hd";

                     }

                 }

             }

             SN("#s1");

             SN("#s2");

             SN("#s3");

         </script>

     </body>

 </html>

多个tab选项卡的更多相关文章

  1. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  2. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  3. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  4. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  5. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  6. 工作当中实际运用（1）——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  7. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  8. (2)WinForm中改变Tab选项卡的顺序

    Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.

  9. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  10. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

随机推荐

  1. 深入理解计算机系统_3e 第三章家庭作业 CS:APP3e chapter 3 homework

    3.58 long decode2(long x, long y, long z) { int result = x * (y - z); if((y - z) & 1) result = ~ ...

  2. .Net 异步方法， await async 使用

    最近朋友问起await  和 async第一次听说这个await ,就查了一下这个await使用在于 异步方法async 中,中文意思就是等待,经过一系列的百度参考简单的明白了这个东西的意思,  异步 ...

  3. 基于 HTML5 WebGL 的 3D 服务器与客户端的通信

    这个例子的初衷是模拟服务器与客户端的通信,我把整个需求简化变成了今天的这个例子.3D 机房方面的模拟一般都是需要鹰眼来辅助的,这样找产品以及整个空间的概括会比较明确,在这个例子中我也加了,这篇文章就算 ...

  4. CentOS ifconfig无IP地址解决办法

    修改/etc/sysconfig/network-scripts/ifcfg-ens33 把 ONBOOT 改为 yes,重启后就会有ip,且物理机和虚拟机可以互相ping通了.

  5. iOS 环信透传cmd消息多次重复接收，解决办法

    由于项目需求,需要在项目中接到消息的时候做不同界面的不同的操作,哪儿需要哪儿就要添加代理:引起代理事件重复执行:所以要在VC显示的时候添加代理,消失的时候删除代理 环信 透传 消息多次接收情况(由于代 ...

  6. Python 多线程进程高级指南(二)

    本文是如何<优雅地实现Python通用多线程/进程并行模块>的后续.因为我发现,自认为懂了一点多线程开发的皮毛,写了那么个multi_helper的玩意儿,后来才发现我靠原来就是一坨屎.自 ...

  7. Linux第七节随笔 diff /uniq /stat

    linux第七讲(上)1.diff link 作用:diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时才有效.以逐行的方式,比较文本文件的异同处. 如果指定比较的是 ...

  8. jmeter中一次运行多条sql语句

    操作比较简单,主要就分两步: 第一步:在JDBC Connection Configuration中设置,主要见下图标注部分增加:?allowMultiQueries=true 第二步:在JDBC R ...

  9. Java企业微信开发_11_异常：java.net.UnknownHostException: qyapi.weixin.qq.com

    原因: 网络原因导致 dns解析失败. 解决方案: 方案一 : 1.查看你的服务器能否ping通外网,不过不行说明你的网络出了问题.     (我的情况是客户的应用服务器只能内网访问,所以是网络出问题 ...

  10. Python 项目实践三（Web应用程序）第四篇

    接着上节继续学习,本章将建立用户账户 Web应用程序的核心是让任何用户都能够注册账户并能够使用它,不管用户身处何方.在本章中,你将创建一些表单,让用户能够添加主题和条目,以及编辑既有的条目.你还将学习 ...