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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
greybox——不开新窗口看新的网页
Feb 20 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
Node.js的包详细介绍
Jan 14 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用pipeline批量读写redis的方法
2019/02/18 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Java里面有没有全局变量?为什么?
2015/02/06 面试题
制衣厂各岗位职责
2013/12/02 职场文书
运动会入场词200字
2014/02/15 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
公司会议策划方案
2014/05/17 职场文书
毕业生面试求职信
2014/06/23 职场文书
公司离职证明范本
2014/10/17 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
五年级语文教学反思
2016/03/03 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android