这个想法早就有的 （写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. BuildPipeline.BuildAssetBundle 编译资源包

    原文出自:http://blog.csdn.net/nateyang/article/details/7567831 1.导出.unity3d格式资源: http://game.ceeger.com/ ...

  2. UVALive - 4270 Discrete Square Roots (扩展欧几里得)

    给出一组正整数$x,n,r$,使得$r^2\equiv x(mod\: n)$,求出所有满足该等式的$r$. 假设有另一个解$r'$满足条件,则有$r^2-r'^2=kn$ 因式分解,得$(r+r') ...

  3. Spring通过XML方式实现定时任务

    package com.wisezone.service; import java.text.SimpleDateFormat; import java.util.Date; import org.s ...

  4. 类和对象（12）—— this指针

    首先,我们都知道类的成员函数可以访问类的数据(限定符只是限定于类外的一些操作,类内的一切对于成员函数来说都是透明的),那么成员函数如何知道哪个对象的数据成员要被操作呢,原因在于每个对象都拥有一个指针: ...

  5. 学习动态性能表(7)--v$process

    学习动态性能表 第七篇--V$PROCESS  2007.5.30 本视图包含当前系统oracle运行的所有进程信息.常被用于将oracle或服务进程的操作系统进程ID与数据库session之间建立联 ...

  6. MongoDb学习网站

    http://www.runoob.com/mongodb/mongodb-window-install.html

  7. laravel DB::raw() DB::RAW()的用法

    laravel中的 DB::raw() 和DB::RAW()是同一种功能;用法如下 public function test() { $real = 66;]); $res = \ai\Models\ ...

  8. ramfs, rootfs and initramfs

    ramfs, rootfs and initramfs October 17, 2005 Rob Landley <rob@landley.net> =================== ...

  9. ucos ii 百度官方介绍

          μC/OS II(Micro-Controller Operating System Two)是一个可以基于ROM运行的.可裁剪的.抢占式.实时多任务内核,具有高度可移植性,特别适合于微处 ...

  10. 机器学习：集成学习（Soft Voting Classifier）

    一.Hard Voting 与 Soft Voting 的对比 1)使用方式 voting = 'hard':表示最终决策方式为 Hard Voting Classifier: voting = 's ...