整體預(yù)覽
Tab1詳解
Tab1中的代碼如下
<div id="Tab1" style="display:block;">
tab1中的代碼如下:
<span style="cursor: hand;" #光標(biāo)呈現(xiàn)為 手 的樣式摔癣,可以自己更改
onclick="javascript:document.all['Tab1'].style.display='block'; #將Tab1顯示為塊級(jí)元素
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中的顏色改成已選中的顏色仓技。
效果如下:
切換以后會(huì)切換到另一個(gè)圖鸵贬。