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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
ES6的解构赋值实例详解
May 06 Javascript
jquery图片预览插件实现方法详解
Jul 18 jQuery
vue 需求 data中的数据之间的调用操作
Aug 05 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 strcmp使用说明
2010/04/22 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
详解vue中axios的封装
2018/07/18 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python实现定时任务
2017/02/08 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python实现门限回归方式
2020/02/29 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
学习两会精神心得范文
2014/03/17 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
员工安全生产承诺书
2014/05/22 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2015年团支部工作总结
2015/04/03 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电