这个想法早就有的 （写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. Ajax做日期选择

    1.主页面 引入JS Jquery bootstrap 包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  2. stl_hash_map.h

    stl_hash_map.h // Filename: stl_hash_map.h // Comment By: 凝霜 // E-mail: mdl2009@vip.qq.com // Blog: ...

  3. ThinkPHP中的find和select的区别

    ThinkPHP作为PHP中应用广泛又好用的框架,能比较快速的开发MVC架构的管理系统,获得了大量的应用.但是在ThinkPHP中select()和find()方法有什么区别呢? 事实上find()返 ...

  4. 我的 Linux 配置

    系统版本 Ubuntu 18.04 一名老年弱智 OI 选手的 Linux 配置 文本编辑器: Sublime Text 中文补丁,关闭自动补全,自动联想,括号匹配,字号 15 编译器: g++ (然 ...

  5. CodeForces - 150C ：Smart Cheater （线段树，求最大连续区间）

    I guess there's not much point in reminding you that Nvodsk winters aren't exactly hot. That increas ...

  6. 【转载】BusyBox 简化嵌入式 Linux 系统

    原文网址:http://www.ibm.com/developerworks/cn/linux/l-busybox/ BusyBox 是很多标准 Linux® 工具的一个单个可执行实现.BusyBox ...

  7. 解决方案： the selected file is a solution file but was created by a newer version of this application and cannot be opened

    最近在用IronGithub访问Github api时遇到一个问题: the selected file is a solution file but was created by a newer v ...

  8. debian7.2+nginx+mysql

    1.安装mysql sudo aptitude install mysql-server netstat -atln 查看3306端口 数据库目录: /var/lib/mysql/ 配置文件/usr/ ...

  9. navicat链接远程数据库

    1.之前使用的是常规的连接方式 学习源头: https://jingyan.baidu.com/article/0aa2237573c1e688cc0d6427.html 这里的ip地址是服务器的ip ...

  10. laravel 导出导入excel和csv文件的 使用

    在项目中用到的常用功能数据导入导出 在laravel有插件可以直接使用 方便快捷 学习源头: https://www.cnblogs.com/martianShu/p/5869270.html htt ...