这篇文章主要为大家详细介绍了 javascript 实现不同颜色 Tab 标签切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
具体代码:
- <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>
来源: http://www.phperz.com/article/17/0401/266118.html