`
舟舟同学
  • 浏览: 44426 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

JQuery开发1-显示或者影藏网页部分内容

jquery 
阅读更多

用户在查看网页过程中，经常会碰到网页中由于内容较多而无法全部显示出来，这时候网页中会出现一个类似“展开全部”或者“显示更多”的功能按钮，让用户可以查看全部内容。这个操作用jQuery操作非常简单，具体实现代码如下：

第一步，下载jquery.js文件，这个文件网上有很多，用户可以自行下载自己需要的。

第二步，把下载好的jquery.js放在项目WebRoot的script文件夹中，当然，大家也可以直接放在WebRoot根目录下。

第三步，应用，当点击按钮时候，让自己设定的内容显示或者影藏，这里是以jQuery框架中的toggle()函数，具体代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<html>
  <head>
  <script language="javascript" src="${pageContext.request.contextPath}/script/jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
$("#show").click(function(){
$("h3").toggle();
var btn = document.getElementById('show');
if(btn.value=="显示")
{
$("#show").val("影藏");
}
else
{
$("#show").val("显示");
}
});
});
</script>
  </head>
  <body>
   <h2 class="h2-caption">影藏和显示功能</h2>
   <input type="button" id="show" value="显示">
   <h3 class="h3-text">测试</h3>
  </body>
</html>

让网页中出现的“测试”字样显示或者影藏。

除了调用toggle()函数外，还可以调用show()和hide()，来实现该功能，具体实现方法类似。

0
顶
1
踩
分享到：
| hibernate开发5--hibernate分页查询
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics