使用人群:不动任何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>
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>