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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
jQuery实现简单全选框
Sep 13 jQuery
vue+iview使用树形控件的具体使用
Nov 02 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防注
2007/01/15 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
常见的python正则用法实例讲解
2016/06/21 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python实现桌面壁纸切换功能
2019/01/21 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python开发入门——set的使用
2020/09/03 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
质检部部长职责
2013/12/16 职场文书
经典演讲稿汇总
2014/05/19 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
pytorch 如何使用float64训练
2021/05/24 Python