这个想法早就有的 （写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,iVBORw0KGgoAAAANSUhEUgAAAgAAAAEACAIAAABK8lkwAAALgUlEQVR4nO3d32vV9x3H8f4VY5yr3cnqLh3SC2+8cHZe9MZD3KgVuoZIVlZkXYNgNwVNkG8STYxJ9WgaE/PjVJaOjfZipW4rzGIHxY3ChFHYCqJSHGUIxVrtLqIhJicnOfme7Zzv5/148LrIj29DMef7fSbn5CRPfQNASE+1+n8AgNYQAICgBAAgKAEACEoAAIJaNQC3rl59b9++t7ZunX76aWvzvbV16+9f2HvzypUHX99/+ODBNw8frvmJv3379uXLl+fn56u0vfn5+ffff//WrVsPHz58uI5PrvO3WNvA+dsstQPwt5GRlv+j2Ab2518e/OLmP7/68u7DBw/qfNY/+eSTVl/T2IiPPvro7t279+/fr58B529Bt87zt4lqBODW1ast/4ewDe/KqaM3r3/85X/+vdpt6Pbt262+jrFx165du3Pnzr1791ZrgPO30Fvz/G2uGgF474UXWv6vYBve7Lbv/+XS6ZvXP/7qy7s1v5e8fPlyqy9ibNzbb799/fr1O3fu3L9/v+Yp7fwt9NY8f5urRgDcb1joTX3vu78+9KO/vjv5xc1/1fwiwv3+RffBBx98+umnd+/erflNgPO30Fvz/G2uGgFo+T+B5Vxl35Y/nv3VjU+uPvi6xheJrb58kdc777xz7dq1zz//vGYAWn7zs5yrf/42lwAkuKHnvvNu9tN/XHn366/urfz8tvryRV7z8/NXr169cePGg1pfIbb85mc5V//8bS4BSHCDPyz9rrfz+p9+IwBJunTp0ocffvjZZ58JQJKrf/42lwAkuIFnv/3boz/5+x/mBSBJly5dunLligCkuvrnb3MJQIITgLQJQNoTAMs1AUibAKQ9AbBcE4C0CUDaEwDLNQFImwCkPQGwXBOAtAlA2hMAyzUBSJsApD0BsFxLKABTIz3D3duyjlJWLmU/3n7yYM/ZocOjRw5fXH5g5dyRPSee35yVS1l5U7Zvx8lDhyfGJyaOHhqv8VEbOrj9CEDaEwDLtTQCMDU82r0569hxamhsplqtVquzF4bP9mzPyqWsvPfcE0ceH37+mZO9g1MLx1UvzlSOnXpp4fq+pzKz7MM2cnB7EoC0JwCWaykEYGysa1PWsWtsxdfkk727svKOJW+vvNG1aeDI2IqPMHHu1S1PHtnowe1KANKeAFiuFT8AU727snJpsLdS652Vsa7S0ODjO4FGu7Py7jNTNT/KsaGOLSOjS97S0MFtSwDSngBYrhU9ADPHhjpKWcfeVe+QGe0eODi48OKFI9uyfT+/sMqBF45uHx5Z8mojB7cvAUh7AtDMlUvZ0q359gRW8ABM9+/OyqWs5/jqhwyfG6zMVavVavXNg1uyjs4699zMLXm5oYPbV2IBWHYOLjsxV56n63m50BOA5m/ZzaL+q0VfsQNwsXKglJVLJ/on1nP0dP/urLxleGjFjwXlPrh9JRaAlSfg4gV92XuXRWLpCzU/TkEnAM2fACxq9eVrLYOnOkpZedtozfv/V7pw+ERHKevYNtxfWfvr94YObltBArDaq9MC0DwCkOAKHYALhwbLpay8643V7qpfYWa0e2DhiQIv7hkbnah/ZW/o4DYlAALQLEEDUPMtyazQARjvGSyXsnLn+Yb+q6nhsVe2PboL+MU9oyN1v8Bv6OA2JAAC0CxxAzC94taTzAIGoFqtVquz48dOv/z4yv5S97m6P9Tf0MHtJckA1PmhDAH43wkdgDXfVdBFDcCCuQuDj77A79h2amSNx3sbOrhdJBmA9b+6+JZljxXXPLKIE4Dmr/4tI43bzeJSCMAqT9dat+mR7oGOUs3nEuc8uPUEQACaJWgA0n5MuNABmDk2VC415bcyzIx09pdL2YFjs80+uMUEQACaRQBqvFr0FToA1bHRfaWsXGrGk3IvVg6U6j/za6MHt5QArDMABT2vBaD5W3nLWO0RpwRW7ABUz/dsysqlgaMrf2XbYzPHhh/9KoiJMy/X+xWeU707ljyc0NDBbSyxACw7Deu/uviW6SUBWPpCAqe2ADRn6X1vuM4VPACzg3uzcinrPrTaY7Kzg3tPPn6e8HjPphPHV33O8JsHtyy9pjd0cPtKLAC2bALQnBX9C4ENr+ABqFYHR54vZeXtqzwZeGy0q/P84y/kL/buyp7vfrP2x6mMdT1xt35DB7cvAUh7AmC5VvgAVGcXHpLt6plc/p6L53t2DC/9ec2Rzqxc6j9wbOW3C7Mjnf3LKtLQwW1LANKeAFiuFT8A1Wp1eqizv6OUvdR9rnJx4Zm6M5Xjo69sP9H75GMDj35stJTt2zM68uhvh1VnJiaHOgc6Nuc6uG0JQNoTAMu1JAJQrVarU2NnD+0eePTHezdn3Z1nzqy8B3/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. String format方法的应用

    String str=null; str=String.format("Hi,%s", "小超"); System.out.println(str); str= ...

  2. zookeeper安装搭建

    一  zookeeper介绍 因为要使用kafka,但是不想用kafka自带的,而且考虑到后面别的地方需要使用,比如分布式job,觉得独立的比较好. zookeeper目前资料一大把,但是一是我需要锻 ...

  3. 洛谷 P1062 数列

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  4. 常用Request对象获取请求信息

    Request.ServerVariables(“REMOTE_ADDR”) ‘获取访问IPRequest.ServerVariables(“LOCAL_ADDR”) ‘同上Request.Serve ...

  5. Python函数-enumerate()

    enumerate(sequence, [start=0]) 作用: 将可循环序列sequence以start开始分别列出序列数据和数据下标,即对一个可遍历的数据对象(如列表.元组或字符串),enum ...

  6. CEF源码编译

    CEF的构造说明:https://bitbucket.org/chromiumembedded/cef/wiki/BranchesAndBuilding chromium的源码地址:https://c ...

  7. 表有外键所以delete报错了，这里有2种办法处理：

    表有外键所以delete报错了,这里有2种办法处理: (1)      临时设置外键失效 (2)      删除表涉及到的外键的表的数据 2.外键失效的处理方案 mysql> SET FOREI ...

  8. 对oracle中date/timestamp的操作

    设置oracle中date的会话格式为 'yyyy-mm-dd hh24:mi:ss' alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss ...

  9. Spring学习十 rest

    1:  Web  service:  是一个大的概念范畴,它表现了一种设计思想 SOAP 是 Web service 的一个重要组成部份. SOAP 是一种协议而非详细产品.SOAP 是通过 XML ...

  10. python with open as f 写韩文中文乱码

    python3和python2的写法不一样具体如下: python3: with open(r'd:\ssss.txt','w',encoding='utf-8') as f: f.write(u'中 ...