1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  <!--
  5.     function ShowTabs(ID) {
  6.         for (i = 0; i < 2; i++) {
  7.             if (i == ID) {
  8.                 document.getElementById("TabTitle" + i).className = "titlemouseover";
  9.                 document.getElementById("Tab" + i).style.display = "";
  10.             }
  11.             else {
  12.                 document.getElementById("TabTitle" + i).className = "tabtitle";
  13.                 document.getElementById("Tab" + i).style.display = "none";
  14.             }
  15.         }
  16.     }
  17.  //-->
  18. </script>
  19. </head>
  20. <body>
  21. <ul>
  22. <ul>
  23. <li class="titlemouseover" id="TabTitle0" onmouseover="ShowTabs(0)">测试</li>
  24. <li class="tabtitle" id="TabTitle1" onmouseover="ShowTabs(1)" >test</li>
  25. </ul>  
  26.  
  27. <div id="Tab0" >
  28.     <ul>
  29.         <li>测试</li>
  30.     </ul>
  31. </div>
  32. <div id="Tab1"style="display: none;" >
  33.     <ul>
  34.         <li>test</li>
  35.     </ul>
  36. </div>
  37. </body>
  38. </html>

鼠标滑过TAB选项卡切换demo 可拓展的更多相关文章

  1. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  5. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  6. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  8. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  9. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

随机推荐

  1. Goldbach

    Description: Goldbach's conjecture is one of the oldest and best-known unsolved problems in number t ...

  2. 使用plantuml生成uml图

    主要包括以下三步: 一.到http://plantuml.com/download 下载plantuml.jar ,我将这个软件放置到home的/home/munication/WORKM/Progr ...

  3. 转自CSDN,关于状态机

    有限状态机FSM思想广泛应用于硬件控制电路设计,也是软件上常用的一种处理方法(软件上称为FMM--有限消息机).它把 复杂的控制逻辑分解成有限个稳定状态,在每个状态上判断事件,变连续处理为离散数字处理 ...

  4. poj1149最大流经典构图神题

    题意:n个顾客依次来买猪,有n个猪房,每个顾客每次可以开若干个房子,买完时,店主可以调整这位顾客 开的猪房里的猪,共m个猪房,每个猪房有若干猪,求最多能卖多少猪. 构图思想:顾客有先后,每个人想要的猪 ...

  5. hadoop学习 的yarn

    Yarn的产生 mapReduc1.0 1单点故障 2扩展效率低 3资源利用率高 降低运维成本 方便数据共享 多计算框架支持 MapReduce Spark Storm Yarn的架构图 Yarn模块 ...

  6. Nginx常用命令（启动/重启/停止/测试配置文件/重新加载配置文件）

    Nginx 安装后只有一个程序文件,本身并不提供各种管理程序,它是使用参数和系统信号机制对 Nginx 进程本身进行控制的. Nginx 的参数包括有如下几个: 使用: /usr/local/ngin ...

  7. Spring注入内部的Beans

    以下内容引用自http://wiki.jikexueyuan.com/project/spring/injecting-inner-beans.html: 如你所知,Java内部类在其他类的范围内定义 ...

  8. 【PowerShell 学习系列】-- 删除Win10自带应用

    Get-AppxPackage *3d* | Remove-AppxPackage Get-AppxPackage *camera* | Remove-AppxPackage Get-AppxPack ...

  9. 【Todo】Java的JIT机制

    先是参考了这篇说的不怎么详细的文章<Java的JIT机制>(Link) JIT是just in time,即时编译技术.使用该技术,能够加速java程序的执行速度. 通常javac将程序源 ...

  10. SQL存储过程实例详解

    本文用3个题目,从建立数据库到创建存储过程,详细讲解数据库的功能. 题目1         学校图书馆借书信息管理系统建立三个表:         学生信息表:student 字段名称 数据类型 说明 ...