<!DOCTYPE html> | |
<HTML> | |
<HEAD> | |
<TITLE>选项卡</ TITLE> | |
<meta charset =“utf-8”> | |
<style type =“text / css”> | |
#header {width:420px; height:100px; - 背景:红色;} | |
#header span {display:block; width:120px; height:100px; text-align:center; font-size:30px; float:left; margin-right:20px; background:gray} | |
#header .selected {background:yellow} | |
#content {width:420px; -background:yellow;} | |
#content div {width:100%; height:300px; display:none;} | |
#d1 {background:pink;} | |
#d2 {background:blue;} | |
#d3 {background:green;} | |
#content .current {display:block;} | |
</样式> | |
</ HEAD> | |
<BODY> | |
<div id =“header”> | |
<span class =“selected”>新闻</ span> | |
<跨度>娱乐</跨度> | |
<跨度>军事</跨度> | |
</ DIV> | |
<div id =“content”> | |
<div id =“d1”class =“current”>新闻</ div> | |
<div id =“d2”>娱乐</ div> | |
<div id =“d3”>军事</ div> | |
</ DIV> | |
</ BODY> | |
<script type =“text / javascript”> | |
oheader =的document.getElementById( '报头') | |
ocontent =的document.getElementById( '内容') | |
ASpan的= oheader.getElementsByTagName( '跨度') | |
ADIV = ocontent.getElementsByTagName( 'DIV') | |
for(var i = 0; i <aspan.length; i ++){ | |
ASpan的[I]的.index =我 | |
//提醒(i) | |
ASpan的[I] .onclick =函数(){ | |
for(var j = 0; j <aspan.length; j ++){ | |
//去除span的类名 | |
ASpan的[J机] .className = ''; | |
//去除content中的div类名 | |
ADIV [J机] .className = ''; | |
} | |
this.className = '选择'; | |
ADIV [this.index机] .className = '当前' | |
} | |
} | |
</ SCRIPT> | |
</ HTML> |
动态添加属性
最新推荐文章于 2024-06-20 07:30:00 发布