JavaScript 选项卡

来源：互联网发布：中国软件行业排名编辑：程序博客网时间：2024/05/17 22:55
<!DOCTYPE html><html><head><title>Easy-Tab</title><meta charset="utf-8" /><style>button {width:80px;height:30px;background-color:pink;font-family:微软雅黑;font-size:16px;font-weight:bold;text-align:center;line-height:20px;color:aliceblue;}div {margin-top:10px;width:500px;height:300px;background:aliceblue;font-family:微软雅黑;font-weight:bold;font-size:15px;color:orange;display:none;}.active {background:orange;}.show {display:block;}</style></head><body><button class="active">新闻</button><button>财经</button><button>科技</button><button>体育</button><button>娱乐</button><button>博客</button><div class="show">习近平同联合国秘书长潘基文通电话</div><div>46岁殷勇升任央行副行长 清华大学毕业</div><div>乐视英超危机虚惊一场 只能安稳24小时？</div><div>曼联冬季首签生变故 奥斯卡们来中超非堕落</div><div>一周岁啦！章子怡汪峰一家四口为小女儿醒宝庆生</div><div>谢霆锋一直是娱乐圈中冷酷的形象，在粉丝面前的谢霆锋也会勉强挂上一丝友好的笑容，但或许是性格使然，谢霆锋对粉丝的行为也算不得亲切，粉丝们似乎也喜欢这个男人拽拽的个性。</div> </body><script>var aButton = document.getElementsByTagName('button');var aDiv = document.getElementsByTagName('div');var count = aButton.length;for (var i=0;i<count;i++) {aButton[i].index=i;aButton[i].onclick = function(){for (var j=0;j<count;j++) {aButton[j].className = '';aDiv[j].className = '';}this.className = 'active';aDiv[this.index].className = 'show';};}</script></html>
0 0