<!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. 自学Zabbix3.8-可视化Visualisation

    随着大量数据流入Zabbix,如果用户能够查看正在发生的事情,而不仅仅是数字,那么对于用户来说,这就变得容易得多了.这就是图的所在. 图允许快速地掌握数据流,关联问题,发现什么时候开始,或者做什么事情 ...

  2. [转]ubuntu下安装fiddler

    转 ubuntu下安装fiddler  biangbiang 因为工作中需要用到fiddler工具  现在工作环境迁移到ubuntu14 下  发现fiddler只支持windows网上也有很多推荐 ...

  3. 总结一下现在关于Design Support Library的几个博客

    原文转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0713/3179.html 关于Design Support Libr ...

  4. 在nginx上部署vue项目(history模式)；

    在nginx上部署vue项目(history模式): vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载.但是如果我们不想has ...

  5. Solr集群搭建详细教程（二）

    注:欢迎大家转载,非商业用途请在醒目位置注明本文链接和作者名dijia478,商业用途请联系本人dijia478@163.com. 之前步骤:Solr集群搭建详细教程(一) 三.solr集群搭建 注意 ...

  6. Node.js前言

    最近在学Node.js,所以学到一点东西就更新在上面吧,如果有错误,欢迎大家指正.

  7. 通过 Sublime Package Control 安装插件后不能用的解决办法

    最近使用 Sublime 写 SASS 的时候需要使用高亮功能,通过 Package Control 安装了相关插件,但是安装之后没有反应,再次打开 Package Control 的时候,已经搜索不 ...

  8. python基础知识——字符串详解

    大多数人学习的第一门编程语言是C/C++,个人觉得C/C++也许是小白入门的最合适的语言,但是必须承认C/C++确实有的地方难以理解,初学者如果没有正确理解,就可能会在使用指针等变量时候变得越来越困惑 ...

  9. 豹哥嵌入式讲堂：ARM开发之文件详解（2）- linker文件

    大家好,我是豹哥,猎豹的豹,犀利哥的哥.今天豹哥给大家讲的是嵌入式开发里的linker文件. 在前一节课source文件详解里,豹哥给大家系统地介绍了source文件,source文件是嵌入式工程里典 ...

  10. SpringBoot_02_servlet容器配置

    二.参考资料 1.Spring boot 自定义端口 2.Spring Boot的Web配置(九):Tomcat配置和Tomcat替换