<!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. 十四、Spring Boot 日志记录 SLF4J

    在开发中打印内容,使用 System.out.println() 和 Log4j 应当是人人皆知的方法了. 其实在开发中我们不建议使用 System.out 因为大量的使用 System.out 会增 ...

  2. Struts2.5 伪静态的配置

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

  3. .net 裁剪图片（不压缩）

    命名空间: using System.Drawing; using System.Drawing.Imaging; /// <summary> /// 生成图片缩略文件 /// </ ...

  4. Myeclipse Reload

    前言: 在用 myeclipse 做项目开发的时候.如果没有配置热部署,平凡的去启动 server 如果项目小,那么很简单.如果项目很大,那么重启的项目花费的时间会很长. 在 myeclipse 中其 ...

  5. iOS 多线程 之 GCD（大中枢派发）(一)

    导语: 本文个人原创,转载请注明出处(http://www.cnblogs.com/pretty-guy/p/8126981.html) 在iOS开发中多线程操作通常是一下3种,本文着重介绍Dispa ...

  6. 浅谈Android数据库DBFlow

    一.项目配置 1.根目录下的build.gradle 中添加 maven { url "https://www.jitpack.io" } 如下: classpath 'com.n ...

  7. 图片验证码(Struts2中使用)

    写在前面: 最近在项目中做了一个登录页面,用到了图片验证码的功能,所以记录一下.方便之后再有用到,直接拿来用即可.其实图片验证码的生成都是有固定步骤的,网上也有很多的例子,有的时候,如果不想深究,都是 ...

  8. MySQL相关命令

    我们现在初步学习MySQL,下面来简单介绍一下MySQL常用命令 版权归skylinelin所有,转载请注明出处. 首先登录MySQL数据库,"\h"一下看一下帮助信息 这些就是M ...

  9. 完善chrome翻译插件ChaZD，支持有道智云api

    首先放上该项目的github地址:https://github.com/codethereforam/ChaZD 之前想找一个chrome支持划词翻译的插件,最终在知乎上看到了这个回答,推荐的是Cha ...

  10. BLE抓包是怎么回事儿？

    BLE抓包 在进行网络开发的时候,抓包是一个很重要的调试过程,通过抓包可以分析网络传输的数据是否正确,可以深入理解网络传输过程.在物联网开发中,BLE低功耗蓝牙技术是一种非常通用的网络传输方式.在学习 ...