<!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. 快看Sample代码，速学Swift语言（1）-语法速览

    Swift是苹果推出的一个比较新的语言,它除了借鉴语言如C#.Java等内容外,好像还采用了很多JavaScript脚本里面的一些脚本语法,用起来感觉非常棒,作为一个使用C#多年的技术控,对这种比较超 ...

  2. Struts2.5 伪静态的配置

    伪静态 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还想运用动态脚本解决一些问题.不能用静态的方式来展示网站内容.但 ...

  3. jenkins学习之多项目构建

    多项目构建,即指的是同时构建多个源代码中的项目,我所知道的有两种方法,一种是在某个项目“构建完成后操作”中设置如下: 另外一种是借助于插件——Multijob plugin,如下: 使用方法其实比较简 ...

  4. .NET 实现DES加密解密处理

    .NET 实现DES加密解密处理 using System; using System.Text; using System.Security.Cryptography; using System.I ...

  5. log4go的输出优化

    又看了一些golang的日志包和相关的文章,仔细阅读了go 1.9.2系统提供的log和go-log,产生了对log4go的日志输出进行优化的想法. 结构化与multiwriter log使用mult ...

  6. Android查缺补漏--Service和IntentService

    Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

  7. 配置SQL Server on Linux（2）

    1. 前言 前一篇配置SQL Server on Linux(1),地址:http://www.cnblogs.com/fishparadise/p/8125203.html ,是关于更改数据库排序规 ...

  8. 【java】彩票中奖码生成器：java.util.Random里的方法public int nextInt(int bound)

    package 彩票中奖码生成器; import java.util.Random; public class TestRandom { public static void main(String[ ...

  9. iOS 常用到的宏#define

    //AppDelegate #define APPDELEGATE [(AppDelegate*)[UIApplication sharedApplication] delegate] //----- ...

  10. [置顶] Xamarin android如何调用百度地图入门示例（一）

    在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...