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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
js constructor的实际作用分析
Nov 15 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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代码DOS造成用光网络带宽
2011/03/01 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php的hash算法介绍
2014/02/13 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
求职信模版
2013/11/30 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
社区戒毒工作方案
2014/06/04 职场文书
搞笑车尾标语
2014/06/23 职场文书
励志演讲稿500字
2014/08/21 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis