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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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学习笔记之基础知识
2014/11/08 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
js电话号码验证方法
2015/09/28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
拖动时防止选中
2017/02/03 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
webpack 代码分离优化快速指北
2019/05/18 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
python装饰器代码深入讲解
2021/03/01 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
init进程的作用
2012/04/12 面试题
优质的学校老师推荐信
2013/10/28 职场文书
影视制作岗位职责
2013/12/04 职场文书
小学生操行评语
2014/04/22 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
农村结婚典礼主持词
2015/06/29 职场文书