jquery 顯示/ 隱藏 頁面中部分內容

 

 使用人群：不動任何js，只懂html的。

 

本文講解如何使用jquery來顯示隱藏頁面中相關區域。

    1.首先我們有2個div分別是：frm_Win、frm_Mac。其中各有一個顯示對方的Link（id="frm_WinShow",id="frm_macShow"）.

    2.引用jquery在Head區域添加jquery引用（<script type="text/javascript" src="jquery-1.4.1.js"></script>） 注意：一般只要包含jquery-x.x.x.js即可（其中x.x.x.是版本號）這個就不需要管了，一般那個版本都適用。

    3.添加Link的點擊事件（下方代碼中<script>不標簽之中的部分）。

                           語句介紹：

                                1.$("#xxx");--------指明是那個東東(其中xxx是元素的id屬性的內容)

                                2.$("#xxx").show();--------讓【xxx】這個東西顯示

                                3.$("#xxx").hide();--------讓【xxx】這個東西隱藏

4. $("#xxx").css("aaaa","bbbbb");--------改變【xxx】這個東西的css屬性aaa的值為bbb

                                5.$("#xxx").click(function () {                                    

                                

                                });-----------讓【xxx】這個東西點擊的時候，執行里面的動作（指的是2，3，4中的步驟）。

6.js中當前行中 //之后的 內容是注釋的部分。

 

 1  < head >
 2  < script  type ="text/javascript"  src ="Scripts/jquery-1.4.1.js" ></ script >
 3  </ head >
 4  < body >
 6      < div  id ="frm_Win"  style ="display: none;" >
 7         WinWinWinWinWinWinWinWinWinWinWinWinWinWinWinWinWinWin  < a  href ="javascript:"  id ="frm_WinShow" >
 8             Down Mac </ a >
 9      </ div >
10      < div  id ="frm_Mac" >
11         MacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMac  < a  href ="javascript:"  id ="frm_macShow" >
12             Down Win </ a >
13      </ div >
14      < script  type ="text/javascript" >
15         $("#frm_WinShow").click( function () {
16             $("#frm_Mac").show(); // .css("display", "block");
17              $("#frm_Win").hide(); // .css("display", "none");
18          });
19         $("#frm_macShow").click( function () {
20             $("#frm_Win").show(); // .css("display", "block");
21              $("#frm_Mac").hide(); // .css("display", "none");
22          });
23      </ script >   </ body >