js实现TAB切换对应不同颜色的代码
更新时间:2015年08月31日 14:50:10 作者:企鹅
这篇文章主要介绍了js实现TAB切换对应不同颜色的代码,涉及javascript页面元素的遍历及样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js实现TAB切换对应不同颜色的代码。分享给大家供大家参考。具体如下:
这是一个个性化的TAB菜单,每个TAB卡片的背景颜色都不相同,鼠标点击上部的TAB,在主体内容区可看到颜色的变化。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-cha-tab-color-nav-codes/
具体代码如下:
<!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程序设计有所帮助。
相关文章
在 IE 中调用 javascript 打开 Excel 表
在 IE 中调用 javascript 打开 Excel 表...2006-12-12jquery的.click()点击事件为什么无效,on('click',function())如何使
jquery的.click()点击事件,通常都是可以正常使用的,有时选中的选择器被点击时无法触发回调函数,这是为什么呢?改成on绑定click就可以了吗?面对这样的情况,on('click',function())应该如何使用?2023-08-08javascript通过元素id和name直接取得元素的方法
这篇文章主要介绍了javascript通过元素id和name直接取得元素的方法,涉及javascript获取元素的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
最新评论