网页设计中页面切换 第1篇
<html>
<head>
<metacharset=_UTF-8_>
<title>tab切换title>
<style>
.on{
/* 让class名是on的元素，文字变成红色 */
color:red;
#con div{
width:200px;
height:200px;
border:10px solid orange;
/* 让内容区域都隐藏起来 */
display:none;
#con .active{
/* 让class名是active的元素显示出来 */
display:block;
style>
head>
<body>
<divid=_btn_>
<buttonclass=_on_>标题1button>
<button>标题2button>
<button>标题3button>
div>
<divid=_con_>
<divclass=_active_>内容1div>
<div>内容2div>
<div>内容3div>
div>
<script>
//获取到id名是btn的元素。
varbtn=document.getElementById(_btn_);
//获取到btn里面标签名是button的元素，也就是获取到3个按钮。
varobtn=btn.getElementsByTagName(_button_);
//获取到id名是con的元素。
varcon=document.getElementById(_con_);
//获取到con里面标签名是div的元素，也就是获取到3个内容。
varocon=con.getElementsByTagName(_div_);
for(vari=0;i<obtn.length;i++){
//给每个按钮定义了一个index属性，这个index是属于obtn[i]的属性和方法。
obtn[i].index=i;
网页设计中页面切换 第2篇
1. 我们需要先把所有内容区域都隐藏，所以我们使用for循环来写。
2. 把所有内容区域div的class名去掉就可以了。
3. 把当前索引对应的内容区域展示出来，只需要把class名active加上就可了，active的样式我们在上面已经写过了。
代码如下：
//隐藏所有内容区域。
for(varj=0;j<ocon.length;j++){
ocon[j].className='';
//当前索引对应的内容展示出来。
ocon[this.index].className='active';
网页设计中页面切换 第3篇
代码如下：
for(vari=0;i<obtn.length;i++){
obtn[i].onclick=function(){
for(varj=0;j<obtn.length;j++){
// 去掉所有按钮的class名。
obtn[j].className=__;
网页设计中页面切换 第4篇
我们发现按钮的长度（）和内容的长度（）是一样的，上面我们是用两个for循环来写，其实我们可以把代码优化下，改成用一个for循环就可以了。代码如下：
for(varj=0;j<obtn.length;j++){
// 去掉所有按钮的class名。
obtn[j].className=__;
//隐藏所有内容区域。
ocon[j].className='';