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 纠正 cleanWhitespace函数
Mar 11 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
vue点击页面空白处实现保存功能
Nov 06 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
DIY实用性框形天线
2021/03/02 无线电
Adodb的十个实例(清晰版)
2006/12/31 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
php命名空间学习详解
2014/02/27 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
canvas绘制七巧板
2017/02/03 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
详解python itertools功能
2020/02/07 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
Python多分支if语句的使用
2020/09/03 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
材料采购员岗位职责
2013/12/17 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书