您的位置：首页 > Web前端 > JQuery

jquery 显示/ 隐藏页面中部分内容

2012-05-17 16:16 281 查看

使用人群：不动任何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>
<div id="frm_Mac">
MacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMacMac <a href="javascript:" id="frm_macShow">
Down Win</a>
</div>
<script type="text/javascript">
$("#frm_WinShow").click(function () {
$("#frm_Mac").show();//.css("display", "block");
$("#frm_Win").hide();//.css("display", "none");
});
$("#frm_macShow").click(function () {
$("#frm_Win").show();//.css("display", "block");
$("#frm_Mac").hide();//.css("display", "none");
});
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery 显示/ 隐藏 页面中部分内容

jquery 显示/ 隐藏页面中部分内容