js+css实现tab菜单切换效果的方法

本文实例讲述了js+css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下：

index.css如下：

代码如下:

* { 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    width: 600px; 
    margin: 0 auto; 
    background-color: silver; 
} 
 
#contanier { 
    background-color: yellow; 
    width: 600px;height: 400px; 
} 
 
#tabNavi { 
    width: 600px;height: 30px; 
    background-color: #00bfff; 
    text-decoration: none; 
    list-style-type: none; 
} 
 
#tabNavi li { 
    float: left; 
    margin-right: 7px; 
     background-color: #008b8b; 
    color: white; 
    cursor: pointer; 
    width: 60px; 
    height: 28px; 
    line-height: 30px; 
    text-align: center; 
} 
#content { 
    width: 600px;height: 370px; 
    background-color: white; 
}

index.html如下：

代码如下:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>js实现tab菜单动态切换效果</title> 
    <link href="css/index.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        var arr = [ 
            { "title": "新闻", "content": "这是新闻频道" }, 
            { "title": "财经", "content": "这是财经频道" }, 
            { "title": "娱乐", "content": "这是娱乐频道" }, 
            { "title": "体育", "content": "这是体育频道" }, 
            { "title": "汽车", "content": "这是汽车频道" }, 
            { "title": "视频", "content": "这是视频频道" }, 
            { "title": "生活", "content": "这是生活频道" } 
        ]; 
 
        window.onload = function() { 
            for (var i = 0; i < arr.length; i++) { 
                var liNew = document.createElement("li"); 
                liNew.innerHTML = arr[i].title; 
                gel("tabNavi").appendChild(liNew); 
                //在这些li上面都绑定点击事件，就需要给他们每一个赋一个属性(最好是id) 
                liNew.setAttribute("id", i); 
                 
                liNew.onclick = function () { 
                   var navs = gel("tabNavi").childNodes; 
                    //清除所有颜色 
                   for (var j = 0; j < navs.length; j++) { 
                       if (navs[j].nodeType == 1) { 
                           navs[j].style.backgroundColor ="#008b8b"; 
                       } 
                    } 
 
                    this.style.backgroundColor = "red"; 
                    gel("content").innerHTML = arr[this.id].content; 
                }; 
            } 
        }; 
    </script> 
</head> 
<body> 
    <div id="contanier"> 
        <ul id="tabNavi"></ul> 
        <div id="content" class="content"></div> 
    </div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • CSS JavaScript 实现菜单功能 改进版

    改进版本优化了这个问题,通过简单的Javascript代码就可以增加菜单.同时使得HTML页面非常简洁,只需要写2行代码即可!O(∩_∩)O 1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件.如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Menu</T

  • JavaScript CSS 菜单功能代码

    Menu #menubar { font-family:verdana; font-size:12px; margin:1px; } #menubar li { float:left; position:relative; text-align:left; } /* each menu item style */ #menubar li a { border-style:none; color:black; display:block; width:150px; height:20px; lin

  • Div+CSS+JS树型菜单，可刷新

    搞了一个DIV+CSS菜单,兼容Firefox,分享给大家,大家一齐学习 Div+CSS+JS树型菜单,可刷新 #PARENT{ width:300px; padding-left:20px; } 我的网站 [url]www.netany.net[/url] [url]www.netany.net[/url] [url]www.netany.net[/url] 我的帐务 支付 网上支付 登记汇款 在线招领 历史帐务 网站管理 登录 管理 管理 管理 网站管理 登录 管理 管理 管理 工作需要搞了

  • JS+CSS 制作的超级简单的下拉菜单附图

    JS+CSS 制作的超级简单的下拉菜单附图

    先看效果:  代码: 复制代码 代码如下: <html> <head> <title>Good Test</title> <script> function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = "inline"; } function HideSubMenu(SubMenu) { document.getElementB

  • JavaScript CSS创建右击菜单效果代码

    JavaScript CSS创建右击菜单效果代码

    效果图:  css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default

  • css+js下拉菜单

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • js css实现垂直方向自适应的三角提示菜单

    js css实现垂直方向自适应的三角提示菜单

    这是一个比较简单实用的菜单,最重要的是他不需要引用jQuery库.菜单在垂直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在下面,当主菜单靠近底部,子菜单在上面.运用Modernizr的触摸检测功能,我们可以让子菜单的响应在pc上是hover,而在触摸设备上是点击.例子中还示范了如何在宽度比较窄的情况下如何调整布局. html代码 <ul id="cbp-tm-menu" class="cbp-tm-menu"> <li> <a hr

  • 通用的二级菜单代码(css+javascript)

    ]但在<CSS二级菜单>中,如果一级菜单中的超链接是#,那么只要单击该一级菜单,那么与这个一级菜单对应的二级菜单就会一直显示在网页中,不能隐藏,是一个小小的bug.后来仔细的想了一想,其实,无论是什么样的二级菜单,原理都是一样的: 1.每一个一级菜单都会对应一个层,而这个层里放着的就是该一级菜单对应的二级菜单. 2.默认情况下,二级菜单这个层是隐藏的,在CSS中将层的display属性值设为none,可以达到这一目的. 3.当鼠标放在一级菜单上时,将对应的二级菜单层显示出来,在CSS中将层的d

  • Div+Css(+Js)菜单代码及制作工具

    Div+Css(+Js)菜单代码及制作工具

    效果直逼flash的Div+Css+Js菜单 css菜单 body{ background-color:#B8B8A0; } #fbtn{ display:none; overflow:hidden; border-style:solid; border-width:1px; border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56; padding:1 1 1 1; width:115px; height:30px; } #fbtn_txt{ position:

  • 无js5款纯div+css制作的弹出菜单标准

    一.最基本的:二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; mar

随机推荐