利用js实现选项卡的特别效果的实例


Posted in Javascript onMarch 03, 2013
<html>
<head>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{margin:0;padding:0;border:0}
        #main{width:300px;height:300px;background-color:green}
        #head{height:50px;background-color:red}
        #head li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px}
    </style>
</head>
<body>
    <div id="main">
    <div id="head">
    <ul>
        <li id="tab1" onclick="show(1)" style="background-color:green">新闻</li>
        <li id="tab2" onclick="show(2)">体育</li>
        <li id="tab3" onclick="show(3)">音乐</li>
        <li id="tab4" onclick="show(4)">娱乐</li>
    </ul>
    </div>
    <div id="content">
    <p id="p1">今天习总书记去乌干达访问了</p>
    <p id="p2" style="display:none">乔丹改打乒乓球了</p>
    <p id="p3" style="display:none">江南style</p>
    <p id="p4" style="display:none">赵本山退出春晚</p>
    </div>
    </div>
</body>
    <script>
        function show(n){
            for(var i=1;i<=4;i++){
            //先把所有的选项卡背景颜色设为橙色,内容都隐藏
                document.getElementById("tab"+i).style.backgroundColor = 'orange';
                document.getElementById("p"+i).style.display = 'none';
            }
                document.getElementById("tab"+n).style.backgroundColor = 'green';
                document.getElementById("p"+n).style.display = "block";
        }
    </script>
</html>
Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Javascript UrlDecode函数代码
Jan 09 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
JQuery实现图片轮播效果
May 08 jQuery
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
js 控制下拉菜单刷新的方法
Mar 03 #Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 #Javascript
javascript重复绑定事件造成的后果说明
Mar 02 #Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 #Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 #Javascript
JQuery动画和停止动画实例代码
Mar 01 #Javascript
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
php输出形式实例整理
2020/05/05 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python运行DLL文件的方法
2020/01/17 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python复合条件下的字典排序
2020/12/18 Python
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
上学迟到的检讨书
2014/01/11 职场文书
教学实验楼管理制度
2014/02/01 职场文书
《长城》教学反思
2014/02/14 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
永远是春天观后感
2015/06/12 职场文书
中秋晚会致辞
2015/07/31 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js