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 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
简述vue中的config配置
Jan 23 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
JavaScript实现10秒后再次获取验证码
Dec 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
ThinkPHP之M方法实例详解
2014/06/20 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python文件夹与文件的操作实现代码
2014/07/13 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
土木工程应届生自荐信
2013/09/24 职场文书
自我评价的写作规则
2014/01/06 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
会计出纳岗位职责
2015/03/31 职场文书
仰望星空观后感
2015/06/10 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技