<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. Windows下ElasticSearch的使用方式 CURL+Cygwin+Head插件

    Windows使用ElasticSearch的命令方法 一.CURL(不推荐) 下载curl安装包,解压到指定目录,在命令行运行解压后的exe文件. 二.Cygwin(推荐) 安装Windows下类l ...

  2. ElasticSearch 中 REST API 详解

    本文主要内容: 1 ElasticSearch常用的操作 2 ElasticSearchbulk命令 ES REST API elasticsearch支持多种通讯,其中包括http请求响应服务,因此 ...

  3. net3：文件上传与图片显示以及HiddenField隐藏字段值的使用

    原文发布时间为:2008-07-29 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  4. 自动化测试框架之robot framework的应用分析

    序言:很多人都对自动化测试框架痴迷,我曾经也痴迷过一段时间,以前觉得自己对框架说的头头是道,现在回过头来看以前,说归说,但在如何应用还是欠缺,这一段时间,自己经历了一系列框架的构建和应用的时期,所以, ...

  5. PHP 之命名空间

    文件A.php namesspace a\b; Class User{ function get_user(){ echo 'this is A Class'; } } 文件B.php namessp ...

  6. codevs——1958 刺激

    1958 刺激  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description saffah的一个朋友S酷爱滑雪,并且追求刺 ...

  7. Python知识图谱

    一.Python全栈图谱 2.Python语言高级 Python 全栈工程师前端 Python全栈工程师后端 Python Linux运维自动化开发 Python KaliLinux信息安全开发和使用 ...

  8. go语言学习之路 一：开发环境配置

    1. 安装go 1)下载地址:http://www.golangtc.com/download,下载后直接双击msi文件安装,默认安装在c:\go 2)安装完成后默认会在环境变量 Path 后添加 G ...

  9. Linux服务器同步网络时间

    Linux服务器运行久时,系统时间就会存在一定的误差,一般情况下可以使用date命令进行时间设置,但在做数据库集群分片等操作时对多台机器的时间差是有要求的,此时就需要使用ntpdate进行时间同步. ...

  10. [WASM + Rust] Debug a WebAssembly Module Written in Rust using console.log

    Having some kind of debugging tool in our belt is extremely useful before writing a lot of code. In ...