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 相关文章推荐
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
javascript实现表单验证
Jan 29 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
js实现移动端图片滑块验证功能
Sep 29 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP4之真OO
2006/10/09 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python3 实现调用串口功能
2019/12/26 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
大学应届生的自我评价
2014/03/06 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
单位接收函范文
2015/01/30 职场文书
护理工作个人总结
2015/03/03 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
转变工作作风心得体会
2016/01/23 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书