1. 程式人生 > >學習“javaScript+CSS+DIV實現下拉選單,實現表格變色”內容的筆記

學習“javaScript+CSS+DIV實現下拉選單,實現表格變色”內容的筆記

實現下拉選單

<!DOCTYPE html> <html>   <head>     <title>下拉選單示例</title>     <script language="javaScript">     //當滑鼠移動到選單選項的時候顯示對應的DIV     function show(menu){         document.getElementById(menu).style.visibility="visible";}     //當滑鼠移出的時候隱藏所有的DIV     function hide(){         document.getElementById("menu1").style.visibility="hidden";         document.getElementById("menu2").style.visibility="hidden";         document.getElementById("menu3").style.visibility="hidden";     }     </script>   </head>      <body>    <table>      <tr bgcolor="#9999FF" align="center">      <td width="120" onMouseMove="show('menu1')" onMouseOut="hide()">系列課程</td>      <td width="120" onMouseMove="show('menu2')" onMouseOut="hide()">教學課件</td>      <td width="120" onMouseMove="show('menu3')" onMouseOut="hide()">課程大綱</td>      </tr>      </table>      <div id="menu1" onMouseMove="show('menu1')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:12px;top:38px;width:120px;           visibility=hidden">           <span>c++程式設計</span><br>           <span>java程式設計</span><br>           <span>c#程式設計</span><br>      </div>      <div id="menu2" onMouseMove="show('menu2')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:137px;top:38px;width:120px;           visibility=hidden">           <span>c++課件</span><br>           <span>java課件</span><br>           <span>c#課件</span><br>      </div>      <div id="menu3" onMouseMove="show('menu3')" onMouseOut="hide()"           style="background:#9999FF;position:absolute;left:260px;top:38px;width:120px;<!--注意是:,以及px-->

          visibility=hidden">           <span>c++教學大綱</span><br>           <span>java教學大綱</span><br>           <span>c#教學大綱</span><br>      </div>   </body> </html>

實現表格變色

<!DOCTYPE html> <html>   <head>     <title>變色表格示例</title>     <script language="javaScript">       function changeColor(row){          document.getElementById(row).style.backgroundColor='#CCCCFF';       }       function resetColor(row){          document.getElementById(row).style.backgroundColor='';       }     </script>   </head>      <body>     <table width="200" border="5" cellpadding="1" align="center"><!-- cellpadding規定單元邊沿與其內容之間的空白,實際上就是格子裡面空白部分的多少 -->

     <tr><th>學校</th><th>專業</th><th>人數</th></tr>      <tr align="center" id="row1"            onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')">            <th>北大</th><th>法律</th><th>2000</th>      </tr>      <tr align="center" id="row2"            onMouseOver="changeColor('row2')" onMouseOut="resetColor('row2')">            <th>清華</th><th>計算機</th><th>5000</th>      </tr>      <tr align="center" id="row3"            onMouseOver="changeColor('row3')" onMouseOut="resetColor('row3')">            <th>人大</th><th>經濟</th><th>6000</th>      </tr>     </table>   </body> </html>