javascript实现不同颜色Tab标签切换效果

时间：2021-05-26

本文实例为大家分享了javascript不同颜色Tab标签切换效果的实现代码，供大家参考，具体内容如下

具体代码：

<html> <head> <title>不同颜色选项卡</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <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: #000; } .card_content div:first-child { background: #fff; } </style> <script type="text/javascript"> window.onload = function () { var colorArr = { 0:"#f00", 1:"#0f0", 2:"#00f", 3:"#FC0" }; var bgColorArr = { 0:"#fff", 1:"#fff", 2:"#fff", 3:"#fff", } 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>

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章