javascript实现不同颜色Tab标签切换效果


Posted in Javascript onApril 27, 2016

本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码,供大家参考,具体内容如下

javascript实现不同颜色Tab标签切换效果

具体代码:

<html>
 <head>
 <title>不同颜色选项卡</title>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
 <style type="text/css">
  * {
    margin: 0;
    padding: 0;
  }
  body {
    font: 12px/20px 'microsoft yahei', 'arial';
    word-break: break-all;
    word-wrap: break-word;
  }
  .clearfix:after {
    content: '.';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  .clearfix {
    display: inline-block;
  }
  * html .clearfix {
    height: 1%;
  }
  .clearfix {
    display: block;
  }
  #wrap {
    width: 320px;
    margin: 2em auto;
  }
  .card_List {
    height: 30px;
    border-bottom: 1px solid #f00;
    position: relative;
  }
  .card_List li {
    float: left;
    width: 68px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin: 0 5px;
    display: inline;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .card_List li.current {
    height: 34px;
    line-height: 34px;
    margin-top: -4px;
    border: 1px solid #F00;
    background: #FF9494;
    border-bottom: none;
    color: #fff;
  }
  #oLi li:nth-child(1){
    background: #FF9494;
  }
  #oLi li:nth-child(2){
    background: #8CFE8C;
  }
  #oLi li:nth-child(3){
    background: #6969FB;
  }
  #oLi li:nth-child(4){
    background: #FFE26F;
  }
  .card_content div {
    display: none;
    height: 100px;
    text-align: center;
    color: #000;
  }
  .card_content div:first-child {
    background: #fff;
  }
 </style>
 <script type="text/javascript">
  window.onload = function () {
    var colorArr = {
      0:"#f00",
      1:"#0f0",
      2:"#00f",
      3:"#FC0"
    };
    var bgColorArr = {
      0:"#fff",
      1:"#fff",
      2:"#fff",
      3:"#fff",
    }
    var oL = document.getElementById("oLi");
    var oLi = oL.getElementsByTagName("li");
    var oUl = document.getElementById("oUl").getElementsByTagName("div");
    for ( var i=0 ; i<oLi.length ; i++ ){
      oLi[i].index = i;
      oLi[i].onclick = function () {
        for ( var j = 0 ; j < oLi.length ; j++ ){
          oLi[j].className = "";
          oLi[j].style.border = "none";
        }
        this.className = "current";
        this.style.border = "1px solid " + colorArr[this.index];
        this.style.borderBottom = "none";
        oL.style.borderBottom = "1px solid " + colorArr[this.index];
        for ( var j=0 ; j < oUl.length ; j++ ){
          oUl[j].style.display = "none";
          oUl[this.index].style.display = "block";
          oUl[j].style.backgroundColor = bgColorArr[this.index];
        }
      };
    }
  };
 </script>
 </head>
 
 <body>
  <div id="wrap">
    <ul id="oLi" class="card_List clearfix">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div id="oUl" class="card_content">
      <div style="display:block;">
        11111111111111
      </div>
      <div>
        22222222222
      </div>
      <div>
        3333333333333
      </div>
      <div>
        44444444444444444
      </div>
    </div>
  </div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 #Javascript
JavaScript弹窗基础篇
Apr 27 #Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 #Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 #Javascript
js实现纯前端的图片预览
Apr 27 #Javascript
简介BootStrap model弹出框的使用
Apr 27 #Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Python基于Faker假数据构造库
2020/11/30 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
非常详细的C#面试题集
2016/07/13 面试题
道路建设实施方案
2014/03/18 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
小马王观后感
2015/06/11 职场文书
入党心得体会
2019/06/20 职场文书