日本語
1 つの不完全な組み合わせの分別の選択
<style type="text/css"> body { margin:0px;テキスト整列:中央;フォントサイズ:12px; #dival {マージン:自動;マージントップ:35px;幅:300ピクセル;高さ:200ピクセル;背景色:#7DA7D9;境界線:0px; } #title {幅:300ピクセル;高さ:20ピクセル;フォントサイズ:14px;マージントップ:4px; #table1 テーブル {幅:300px;高さ:30ピクセル;フォントサイズ:12px; #table2 テーブル {幅:300px;高さ:30ピクセル;フォントサイズ:12px; #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { margin:auto;高さ:110ピクセル;幅:290ピクセル;背景色:#eee;位置:相対; #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {位置:絶対;下:3ピクセル;右:3ピクセル;カーソル:ポインタ; } a { テキスト装飾:なし; .changebordercolor { border-top:1px ソリッド #369;ボーダー左:1px ソリッド #369; .backbordercolor { border:0px 赤一色; } </style> <script language="javascript"> function msg(){ document.getElementById("msg1").style.display="none" document.getElementById("msg2").style.display="none" } function msgnone(ms,cont){ document.getElementById(ms).style.display='block' document.getElementById(cont).style.display='none' } function aa1(){ document.getElementById("content1" ).style.display="ブロック" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4")。 style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa2(){ document.getElementById(" content1").style.display="none" document.getElementById("content2").style.display="block" document.getElementById("content3").style.display="none" document.getElementById("content4" ).style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa3(){ document.getElementById ("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="block" document.getElementById(" content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa4(){ document .getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById ("content4").style.display="block" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa5() { document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document .getElementById("content4").style.display="none" document.getElementById("content5").style.display="block" document.getElementById("content6").style.display="none" } function aa6 (){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" " document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="block" } </script> <body onLoad="aa1();msg()"> <div id="divall"> <div id="title">分类型</div> <div id="table1"> <table cellpadding=0 cellpacing=0 boder=0> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'" onMouseOut="this .bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">游戏下ダウンロード</a></td> <td onMouseOver="this. bgColor='#33ccff';aa2();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http ://www.baidu.com">游戏下載</a></td> <td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">游戏下ダウンロード</a></td> </tr ></table></div> <div id="content1">第一里面の内容<div onClick="msgnone('msg1','content1')">关闭</div></div> < div id="content2">第二の里面のコンテンツ<div onClick="msgnone('msg1','content2')">关闭</div></div> <div id="content3"> 第三个このページのコンテンツ<div onClick="msgnone('msg1','content3')">关闭</div></div> <div id="msg1">選択なし</div> <div id="table2 "> <table cellpadding=0 cellpacing=0 boder=0> <tr align=center> <td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">游戏下ダウンロード</a></td> <td onMouseOver ="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">游戏下載</a></td> <td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className= 'changebordercolor'" onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a href="http://www.baidu.com">游戏下ダウンロード</a></td > </tr></table></div> <div id="content4">第 4 里面のコンテンツ<div onClick="msgnone('msg3','content4')">关闭</div>< /div> <div id="content5">第五里面のコンテンツ<div onClick="msgnone('msg2','content5')">关闭</div></div> <div id="content6" >第六里面の内容<div onClick="msgnone('msg2','content6')">关闭</div></div> <div id="msg2">没有选择型</div> </ div></body>