这个想法早就有的 （写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. python_查找模块的方法

    在python自带的Command Line中: 1. 查找一个模块拥有的方法 import 模块名 help(模块名) or dir(模块名) 2. 查找一个模块拥有的方法 import 模块名 h ...

  2. k-means算法的优缺点以及改进

    大家接触的第一个聚类方法,十有八九都是K-means聚类啦.该算法十分容易理解,也很容易实现.其实几乎所有的机器学习和数据挖掘算法都有其优点和缺点.那么K-means的缺点是什么呢? 总结为下: (1 ...

  3. webpack里CommonJS的require与ES6 的module.exports加载模块有何不同

    只需明白commonjs的规则即可,import会被转化为commonjs格式的,babel默认会把ES6的模块转化为commonjs规范的. import vue from 'vue'; //等价于 ...

  4. position:sticky属性测试

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. BZOJ3289：Mato的文件管理

    浅谈莫队:https://www.cnblogs.com/AKMer/p/10374756.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?i ...

  6. 基于springboot+kotlin+gradle构建的框架的坑

    项目采用以上技术构建,于是本人就尝试构建自己的脚手架,然后遇到一大推问题. 使用的是springinitials构建,IDE是:IDEA 现在也是知其然不知其所以然,但是先记录下来修改过程,以后等知识 ...

  7. Python collections系列之有序字典

    有序字典(orderedDict ) orderdDict是对字典类型的补充,他记住了字典元素添加的顺序 1.创建一个有序字典 import collections dic = collections ...

  8. Mysql事件的创建和使用

    1.查看事件是否开启SHOW VARIABLES LIKE 'event_scheduler'; 2.开启事件SET GLOBAL event_scheduler = ON; 3.创建事件DELIMI ...

  9. 使用HibernateTemplate手写源生SQL的【增删改查】 操作

    使用 HibernateTemplate 进行持久化操作 执行的时候不报错,但数据库的持久化操作没有一点作用,问了好多人,说没有声明事务和提交事务, 用的是别人搭的的架构,事务已经有了,自动提交事务的 ...

  10. Windows SID理解

    Windows安全性要依赖于几个基本元素.:访问令牌.SID.安全描述符.访问控制列表.密码. 访问令牌:访问令牌在本质上定义了两 上“P”:Permissions(权限)和Privilege(特权) ...