<!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. 基于低代码平台（Low Code Platform）开发中小企业信息化项目

    前言:中小企业信息化需求强烈,对于开发中小企业信息化项目的软件工作和程序员来说,如何根据中小企业的特点,快速理解其信息化项目的需求并及时交付项目,是一个值得关注和研讨的话题. 最近几年来,随着全球经济 ...

  2. linux 磁盘管理三部曲——（3）mount挂载，/etc/fstab配置文件

    当我们分完区,并做好文件系统格式化,就到了最后的挂载mount了,挂载完毕就可以使用磁盘设备了. 一.什么是挂载,卸载 任何块设备都不能直接访问,需挂载在目录上访问 挂载: 将额外文件系统与根文件系统 ...

  3. vertical-align 和 img属性 和 鼠标样式

    一.vertical-align 一)定义:定义行内元素的基线相对于该所在基线的垂直对齐.(只针对行类块inline/inline-block/<img>,块级不适用!) 二)语法:  三 ...

  4. 《编程珠玑(第2版)》【PDF】下载

    <编程珠玑(第2版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382225 内容简介 书的内容围绕程序设计人员面对的一系列实 ...

  5. 43.Linux调试测试输入思路

    当产品要发布之前,都会进行反复的测试输入,比如:测试按键,遥控,触摸等等. 当出现bug时,就还需要不停地找规律,修改程序,直到修复成功,会显的非常麻烦 答: 可以通过之前在35.Linux-分析并制 ...

  6. SSH连接工具：SecureCRT设置，另一个SSH连接工具：Xshell。在Windows和Linux之间互传文件可用WinSCP

    一般Linux发行版不允许root远程登录,CentOS允许. 调整字体大小:

  7. Eclipse 问题整理

    新建servlet报错,提示找不到javax.servlet包 解决的方法:把tomcat安装包里的lib目录下的servlet-api.jar拷贝一份到工程文件夹下的web目录下的WEB-INF目录 ...

  8. less基础语法

    变量 //->LESS代码 @link-color: #428bca; @link-color-hover: darken(@link-color, 10%); a { color: @link ...

  9. iOS控制器跳转动画

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 MyViewController *myVC = [[MyViewController alloc]init];  //创建动画  C ...

  10. iOS ShareSDK 三方分享/登录使用

    原文 http://www.cnblogs.com/CoderAlex/p/4860352.html 一: 快速集成 1.前言 作为现在App里必不可少的用户分享需要,社交化分享显然是我们开发app里 ...