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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
Vue中使用canvas方法总结
Feb 12 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
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
Banner程序
2006/10/09 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
机械制造与自动化应届生求职信
2013/11/16 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
学校运动会霸气口号
2014/06/07 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
戒赌保证书
2015/05/11 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书