这个想法早就有的 （写tab下拉菜单）就觉得自己对js不是很熟   所以一直没有写 花了不少时间

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>tab下拉菜单</title>

        <style type="text/css">

            *{padding: 0px;margin: 0px;text-decoration: none;margin: 0 auto;width: 500px;list-style: none;text-align: center;}

            #Div{height: 50px;margin-top: 50px;}

            .nav ul{height: 50px;position: absolute;display: block;}

            .nav  li{ float: left;width: 150px;line-height: 50px;margin-right: 10px;box-shadow: 2px 2px 2px saddlebrown;background: brown;border-radius: 5px 5px 0 0;}

            #main {width: 500px;height: 200px;background: darkgrey;display: block;}

            .nav  li:hover{background: darkgrey;box-shadow: 2px 2px 2px darkgrey;font-size:30px;}

            #o2,#o3{display: none;}

        </style>

        <script type="text/javascript">

            function ChangedFt(Q){

                var d;

                var id;

                for(var i=1;i<4;i++){

                    id="one"+i;//复制ID

                    j=document.getElementById(id);//获取ID的标签

                    d=document.getElementById("o"+i);//获取获取#main  ID的标签

                    if(id!= Q.id){                    //如果循环的ID值与当前的onmousover的ID值不相同

                        d.style.display="none";     //如果不相等   #main里面的内容不显示

                    }else{

                        d.style.display="block";    //=  则#main里面的内容显示

                    }

                }

            }

        </script>

    </head>

    <body>

        <div id="Div">

            <ul class="nav">

                <li class="three" id="one1" onmouseover="ChangedFt(this)"><a href="#">JS</a></li>

                <li class="one" id="one2" onmouseover="ChangedFt(this)"><a href="#">CSS</a></li>

                <li class="one" id="one3" onmouseover="ChangedFt(this)"><a href="#">HTML</a></li>

            </ul>

        </div>

        <div id="main">

            <div id="o1">

                <a href="#">JSJSJS</a>

            </div>

            <div id="o2">

                <a href="#">CSS</a>

            </div>

            <div id="o3">

                <a href="#">HTML</a>

            </div>

        </div>

    </body>

</html>

效果：

aaarticlea/png;base64,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3Z1nzqy8B3/w9Cs9b45PTI4eHnv1uUd/PbjjmYGXf3a2kvPgdiUAaU8ALNeSCQA1CUDaEwDLNQFImwCkPQGwXBOAtAlA2hMAyzUBSJsApD0BsFwTgLQJQNoTAMs1AUibAKQ9AbBcE4C0CUDaEwDLNQFImwCkPQGwXBOAtAlA2hMAyzUBSJsApD0BsFwTgLQJQNoTAMs1AUibAKQ9AbBcE4C0CUDaEwDLNQFImwCkvRYHYG5merzvtdP7d/Y/W8p+8C0r3PqfLZ3ev3O877W5memaV5C5ubm5ubn/82WLJqrzGXT+Fn1rnr8btr4AzM5MDvdVXu86vX/n6a4dVrzt31l5vWtyuG9udtU/ga4BxVX/c+f8LfzWcf5uzDoDMDt9fmxyuG+877Xx3l9Y8db32uRw3/T5sbnZGn/hdvHaIQAFVf8z6Pwt/Oqev3msKwALt6G52Zm5mWkr6mZn6tx6XPoTUPebAOdvwVf3/N2w9QYAkrHwR4AXt+G3Q9EJALEsu4Ivvtro2yEBAkAsAgCLBIBA6ly+V3uXKz4JEwACqX811wCiEQACWfNSvtrDvB7+JUkCQCDrvIj7VoAgBIBA1n8F1wAiEABi8VNAsEgAiGXZM7xqvlwVAGIQAMKp+ZxeTwMmIAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACEoAAIISAICgBAAgKAEACGrl1f6/T0utpRBSze4AAAAASUVORK5CYII=" alt="" />

最后我想了哈用swith  弄了哈  内容是叠加的  不晓得怎么把内容实现完全更新

tab下拉菜单的更多相关文章

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

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

  2. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  6. Bootstrap下拉菜单dropdown-menu

    1.步骤 (1)要做为下拉菜单的li增加class="dropdown" (2)为li中文字添加超链接<a data-toggle="dropdown" ...

  7. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  8. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  9. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

随机推荐

  1. 201621123014《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 答: 注1:关键词与内容不求多,但概念之间的联系 ...

  2. git教程1-git工作原理与初始化仓库

    一.git工作原理 1.git是版本控制器,因此管理的是版本,每一次提交commit就是新建一个版本. 2.分支:git主分支可以存放一个阶段已经完成好的版本,而修改版本则放置在次分支上. 3.融合: ...

  3. HDU - 5730 ：Shell Necklace（CDQ分治+FFT）

    Perhaps the sea‘s definition of a shell is the pearl. However, in my view, a shell necklace with n b ...

  4. 2017-2018-1 20179215《Linux内核原理与分析》第十二周作业

    Sql注入基础原理介绍 分组:和20179205王雅哲共同完成实验 一.实验说明 1.1 sql注入  SQL注入攻击通过构建特殊的输入作为参数传入Web应用程序,而这些输入大都是SQL语法里的一些组 ...

  5. BZOJ3075,LG3082 [USACO13MAR]项链Necklace

    题意 Bessie the cow has arranged a string of N rocks, each containing a single letter of the alphabet, ...

  6. 学习动态性能表(17)--v$segstat&v$segment_statistics

    学习动态性能表 第17篇-(1)-V$SEGSTAT  2007.6.13 本视图实时监控段级(segment-level)统计项,支持oracle9ir2及更高版本 V$SEGSTAT中的常用列 T ...

  7. RabbitMQ在windows环境下的安装

    最近一直想入手一台电脑,作为linux服务器,由于经济状况也没有入手,现在就先介绍windows环境下安装rabbitMQ. RabbitMQ是什么 ? RabbitMQ是一个在AMQP基础上完整的, ...

  8. Mxgraph使用总结一

    一.Mxgraph介绍: mxGraph 是一个 JS 绘图组件适用于需要在网页中设计/编辑 Workflow/BPM流程图.图表.网络图和普通图形的 Web 应用程序.mxgraph 下载包中包括j ...

  9. 如何让 PADS Layout 识别到板框

    如何让 PADS Layout 识别到板框 在很久很久以前 PADS Laout 还是 PowerPCB 的时候,铺铜是不认识板框的. 当有铺铜时必须复制一份板框再设置为铺铜才可以. 但到了 PADS ...

  10. vim直接编辑远程文件

    本文由Suzzz原创,发布于http://www.cnblogs.com/Suzzz/p/4116341.html,转载请保留此声明. Linux环境下 vim scp://user@hostIP/P ...