<html>

<head>

<script type="text/javascript">

 <!--

    function ShowTabs(ID) {

        for (i = 0; i < 2; i++) {

            if (i == ID) {

                document.getElementById("TabTitle" + i).className = "titlemouseover";

                document.getElementById("Tab" + i).style.display = "";

            }

            else {

                document.getElementById("TabTitle" + i).className = "tabtitle";

                document.getElementById("Tab" + i).style.display = "none";

            }

        }

    }

 //-->

</script>

</head>

<body>

<ul>

<ul>

<li class="titlemouseover" id="TabTitle0" onmouseover="ShowTabs(0)">测试</li>

<li class="tabtitle" id="TabTitle1" onmouseover="ShowTabs(1)" >test</li>

</ul>  

<div id="Tab0" >

    <ul>

        <li>测试</li>

    </ul>

</div>

<div id="Tab1"style="display: none;" >

    <ul>

        <li>test</li>

    </ul>

</div>

</body>

</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. python--爬取http://www.kuaidaili.com/并保存为xls

    代码如下: 复制在python3上先试试吧^_^ # -*- coding: utf-8 -*- """ Created on Mon Jun 12 13:27:59 2 ...

  2. vcenter api 接口获取开发

    通过连接vcenter 管理服务器,获取其下所有的:存储,网络,ESXI实体机,虚拟机相关信息的脚步: #!/opt/python3/bin/python3 #Author: zhaoyong &qu ...

  3. Netty构建游戏服务器(一)--基本概念与原理

    一,Netty是什么 1,Netty是由 JBOSS提供的一个 java开源框架. 2,Netty是JAR包,一般使用ALL-IN-ONE的JAR包就可以开发了. 3,Netty不需要运行在Tomca ...

  4. Eclipse、IDEA安装JavaFX

    简介 JavaFX插件 e(fx)eclipse是一组工具和必要的库,它们帮助您执行JavaFX编程,确保您已经作为插件将其安装在eclipse上了. JavaFX Scene Builder Jav ...

  5. ZOJ - 4019 Schrödinger's Knapsack (背包，贪心，动态规划)

    [传送门]http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5747 [题目大意]:薛定谔的背包.薛定谔的猫是只有观测了才知道猫的死 ...

  6. bzoj 5091: [Lydsy0711月赛]摘苹果

    5091: [Lydsy0711月赛]摘苹果 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 148  Solved: 114[Submit][Statu ...

  7. 在springboot项目中获取pom.xml中的信息

    最近做了一个新项目,用到了springboot.在搭建框架的过程中,需要读取pom.xml中version的值,本来想着是用自己用java解析xml来着.没想到maven提供了这么一个包,可以直接获取 ...

  8. SqlServer 数据恢复

    首先看看微软官方的给出的建议(摘自:http://technet.microsoft.com/zh-cn/library/ms189272.aspx): 在从完整恢复模式或大容量日志恢复模式切换前,请 ...

  9. 最近遇到的C++数字和字符串的转换问题

    1. 用itoa 和atoi  在头文件#include<cstidlib> itoa用法: char * itoa ( int value, char * str, int base ) ...

  10. hdu 5338 ZZX and Permutations (贪心+线段树+二分)

    ZZX and Permutations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/O ...