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 处理 URL 的两个函数代码
Aug 13 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
js验证密码强度解析
Mar 18 Javascript
Angular性能优化之第三方组件和懒加载技术
May 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
Maps Javascript
2007/01/22 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python脚本后台执行方式
2019/12/21 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
师范生的个人求职信范文
2014/01/04 职场文书
教师师德演讲稿
2014/05/06 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
2015年商场工作总结
2015/04/27 职场文书
2019各种承诺书范文
2019/06/24 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS