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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
JavaScript实例 ODO List分析
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
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python 解析XML文件
2009/04/15 Python
pycharm安装图文教程
2017/05/02 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python机器学习实现决策树
2019/11/11 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
企业员工薪酬方案
2014/06/04 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
运动会表扬稿
2015/01/16 职场文书
冰峪沟导游词
2015/02/09 职场文书
小浪底导游词
2015/02/12 职场文书