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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
制作美丽的拉花
2021/03/03 冲泡冲煮
一个多文件上传的例子(原创)
2006/10/09 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python随机生成库faker库api实例详解
2019/11/28 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
优秀大学生的自我评价
2014/01/16 职场文书
超市周年庆活动方案
2014/08/16 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
护士节慰问信
2015/02/15 职场文书
消夏晚会主持词
2015/06/30 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
nginx配置指令之server_name的具体使用
2022/08/14 Servers