zoukankan      html  css  js  c++  java
  • 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>  


  • 相关阅读:
    [原创]Office Word 2010如何使用printer drivers输出PostScript文件
    MATLAB启动时报错: pathdef.m not found 问题解决方法
    Ubuntu 下 Matlab R2010a 错误:`GLIBCXX_3.4.11' not found 的解决办法
    [转] 一阶导和二阶导的含义
    win7 搭建ftp 设置用户权限 远程访问设置
    Ubuntu 中软件的安装、卸载以及查看的方法总结
    64位ubuntu12.04 LTS安装oracle10g笔记
    如何在Ubuntu 12.04 LTS中使用低版本gcc/g++
    HTTP与HttpServlet
    EXP00091错误
  • 原文地址:https://www.cnblogs.com/netwenchao/p/2506423.html
Copyright © 2011-2022 走看看