2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>TAB（Nav导航菜单</title>

<style type="text/css">

/*  TAB*/

.tab{width:520px;height:auto;float:right;}
.tab ul li{float:left;margin-left:10px;}
.menu_tab{float:right;width:520px;padding:15px 0 15px 10px;height:auto;text-indent:15px;border:1px solid #eaeaea;}
.menu_tab span a{text-decoration:none;}
    </style>
</head>
<body>
<script tyle="text/javascript">
    function qiehuan(num){
        for(var i=0; i<=4; i++){
            if(i==num){
            document.getElementById("tab_qie"+i).style.display="block";
            document.getElementById("mytab"+i).className="tab_on";
            }
            else
            {
            document.getElementById("tab_qie"+i).style.display="none";
            document.getElementById("mytab"+i).className="";
            }
        }
    }

</script>

</head>

<body>

<div class="tab">
    <ul>
        <li id="mytab0" class="tab_on" οnmοuseοver=javascript:qiehuan(0) ><a href="">new tip</a></li>   <!--  如换成鼠标点击触发事件可改onmouseover为onClick=***-->
        <li id="mytab1" class="tab_off" οnmοuseοver=javascript:qiehuan(1)><a href="">tips</a></li>
        <li id="mytab2" class="tab_off" οnmοuseοver=javascript:qiehuan(2)><a href="">summary</a></li>
        <li id="mytab3" class="tab_off" οnmοuseοver=javascript:qiehuan(3)><a href="">cate</a></li>
        <li id="mytab4" class="tab_off" οnmοuseοver=javascript:qiehuan(4)><a href="">data</a></li>
    </ul>
    <div class="menu_tab">
        <div id="tab_qie0" style="display:block">
            <span><a href="">栏目1</a></span>
            <span><a href="">栏目2</a></span>
            <span><a href="">栏目3</a></span>
        </div>
        <div id="tab_qie1" style="display:none">
            <span><a href="">栏目4</a></span>
            <span><a href="">栏目5</a></span>
            <span><a href="">栏目6</a></span>
        </div>
        <div id="tab_qie2" style="display:none">
            <span><a href="">栏目7</a></span>
            <span><a href="">栏目8</a></span>
            <span><a href="">栏目9</a></span>
        </div>
        <div id="tab_qie3" style="display:none">
            <span><a href="">栏目10</a></span>
            <span><a href="">栏目11</a></span>
            <span><a href="">栏目12</a></span>
        </div>
        <div id="tab_qie4" style="display:none">
            <span><a href="">栏目13</a></span>
            <span><a href="">栏目14</a></span>
            <span><a href="">栏目15</a></span>
        </div>
    </div>

</div>

</body>

转载于:https://my.oschina.net/glelaine/blog/23622

TAB（Nav）导航菜单相关推荐

  1. 学习Bootstrap知识记录点-----导航菜单操作

    2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 导航元素 本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类  ...

  2. web应用程序安全性测试_Web应用程序导航菜单的可访问性

    web应用程序安全性测试 A few years ago when I started my journey in the field of frontend engineering at that ...

  3. html响应式布局手机屏幕导航条,导航菜单的 HTML《 响应式网页设计 》

    下面我们先去添加导航菜单需要的 HTML,如果你很熟悉 HTML,可以直接跳过这节 - 打开网页 - 找到要添加导航菜单的位置 -. 先添加一个 nav 标签 - 在上面定义一个 nav Id .. ...

  4. 一款基于jquery和css3的响应式二级导航菜单

    今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览   源码下载 实现的代码. ...

  5. js实现当前导航菜单高亮显示

    2019独角兽企业重金招聘Python工程师标准>>> 为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有 ...

  6. 水平导航菜单（DIV+CSS）

    水平导航菜单(DIV+CSS) 完全用DIV+CSS做的菜单,相比传统用图片做的打开速度更快.预览最终效果>> #nav{height: 44px;width: 425px;backgro ...

  7. 【荐】CSS多级导航菜单

    代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  8. jQuery 分类导航菜单条点击变色

    JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...

  9. Android 抽屉效果的导航菜单实现

    抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西. 关于实现,搜索了一 ...

最新文章

  1. php最简单验证码代码,简单好用的PHP验证码类
  2. Exchange 2007 的邮件监控器
  3. 桑文锋的数据“长征”
  4. Source Insight中查看文件显示全路径
  5. python将整数逆序_python练手入门小项目：字符串的妙用
  6. 擦窗机器人测试标准_擦窗机器人，我选择玻妞的三个理由！
  7. python3获取网页内容_python3获取一个网页特定内容
  8. 演义群侠传（八）【bloom组件源码学习】
  9. 使用DBUtils实现增删改查
  10. nopcommerce 商城案例
  11. KVM之五：KVM日常管理常用命令
  12. 中兴连专利也不申请了？
  13. .Net6项目部署IIS步骤
  14. java 下载文件的文件名乱码_java下载文件名乱码解决方法介绍
  15. 开源BI工具superset的安装使用
  16. 怎么去掉360导航页
  17. pentaho-server-ce-7.0安装配置说明
  18. 如画的水乡，如画的同里16
  19. 淘宝双十一喵果总动员一共多少级？喵果总动员什么时候兑换红包
  20. 2021年熔化焊接与热切割复审考试及熔化焊接与热切割作业模拟考试

热门文章

  1. 谷歌官方TensorFlow开发者认证来了，吴恩达：学我的课，报名费五折
  2. 北大电池新研究登上Nature：3万次循环测试，性能衰减不到30%，大幅提高锂空电池性能...
  3. 腾讯开源首个医疗AI项目，业内首个3D医疗影像大数据预训练模型
  4. 开源 java CMS - FreeCMS2.8 数据对象 applyopen
  5. Nginx负载均衡与配置Nginx的ssl
  6. 【HTTP基础】HTTPS原理及WebSocket原理
  7. windows driver 分配内存
  8. python中为什么无法导入类_ImportError:无法导入名称类型
  9. Python_List对象内置方法详解
  10. N76E003介绍与开发资料获取