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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
node+vue实现文件上传功能
May 28 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
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python实现学生信息管理系统
2020/04/05 Python
对python中的pop函数和append函数详解
2018/05/04 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
校园自助餐厅的创业计划书
2013/12/26 职场文书
就职演讲稿范文
2014/05/19 职场文书
2015年政教主任工作总结
2015/07/23 职场文书