整体预览
Tab1详解
Tab1中的代码如下
<div id="Tab1" style="display:block;">
tab1中的代码如下：
<span style="cursor: hand;" #光标呈现为 手 的样式，可以自己更改
onclick="javascript:document.all['Tab1'].style.display='block'; #将Tab1显示为块级元素
document.all['Tab2'].style.display='none'; #Tab2不显示
document.all['Tab3'].style.display='none'; #Tab3不显示
">
<font color="#808080">tab1</font></span> #808080是已选中的颜色
tab2中的代码如下：
<span style="cursor: hand;"
onclick="javascript:document.all['Tab1'].style.display='none';
document.all['Tab2'].style.display='block';
document.all['Tab3'].style.display='none';
">
<font color="#0000FF"><u>tab2</u></font></span> #0000FF是未选中的颜色
tab3中的代码如下：
<span style=" cursor: hand;"
onclick="javascript:document.all['Tab1'].style.display='none';
document.all['Tab2'].style.display='none';
document.all['Tab3'].style.display='block';
">
<font color="#0000FF"><u>tab3</u></font></span>
Tab2详解
除了将Tab2中的代码改为：
<div id="Tab2" style="display:none;">
tab1同上，只是将颜色改成 未选中的颜色，
tab2中的颜色改成已选择的颜色，
tab3中的颜色仍是未选中的颜色。
Tab3详解
除了将Tab2中的代码改为：
<div id="Tab3" style="display:none;">
tab1同上，只是将颜色改成 未选中的颜色，
tab2中的颜色改成未选择的颜色，
tab3中的颜色改成已选中的颜色。
效果如下：
切换以后会切换到另一个图。
