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


Posted in Javascript onJanuary 20, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS 文字符串转换unicode编码函数
May 30 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
vue 虚拟DOM的原理
Oct 03 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
JavaScript学习心得之概述
Jan 20 #Javascript
DOM基础教程之使用DOM
Jan 19 #Javascript
DOM基础教程之模型中的模型节点
Jan 19 #Javascript
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python多线程和队列操作实例
2015/06/21 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
《我不是最弱小的》教学反思
2014/02/23 职场文书
2016年寒假家长评语
2015/10/10 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python Django获取URL中的数据详解
2021/11/01 Python
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA