js实现TAB切换对应不同颜色的代码


Posted in Javascript onAugust 31, 2015

本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下:

这是一个个性化的TAB菜单,每个TAB卡片的背景颜色都不相同,鼠标点击上部的TAB,在主体内容区可看到颜色的变化。

运行效果截图如下:

js实现TAB切换对应不同颜色的代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>不同颜色选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<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: white;
 }
 .card_content div:first-child {
  background: #FF9494;
 }
</style>
<script type="text/javascript">
 window.onload = function () {
  var colorArr = {
   0:"#f00",
   1:"#0f0",
   2:"#00f",
   3:"#FC0"
  };
  var bgColorArr = {
   0:"#FF9494",
   1:"#8CFE8C",
   2:"#6969FB",
   3:"#FFE26F",
  }
  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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
electron踩坑之dialog中的callback解决
Oct 06 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
You might like
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
javascript中this的四种用法
2015/05/11 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
TypeScript入门-接口
2017/03/30 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python自带的http模块详解
2016/11/06 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python 怎样进行内存管理
2020/11/10 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
房地产销售计划书
2014/01/10 职场文书
学校安全检查制度
2014/01/27 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
留守儿童工作方案
2014/06/02 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2015年党员自评材料
2014/12/17 职场文书
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL