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  < href ="javascript:"  id ="frm_WinShow" >
 8             Down Mac </ a >
 9      </ div >
10      < div  id ="frm_Mac" >
11         MacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMac  < 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 >   


转载于:https://www.cnblogs.com/netwenchao/archive/2012/05/17/2506423.html

猜你喜欢

转载自blog.csdn.net/weixin_34375233/article/details/93607873