`
zlpx
  • 浏览: 156173 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用 JQuery隐藏内容

jQueryJavaScript 
阅读更多

下面的例子展示了，你如何用JQuery动态显示和隐藏一段内容。使用hide(), show()和toggle()函数。

 

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <style type="text/css">
        p#para2 {
            color: green;
            font-style: italic;
        }
        div#nav {
           background-color: #EEEEEE;
        }
    </style>
</head>
<body>
 
    <div id="nav">
        <input type="button" value="toggle()" onclick="$(para2).toggle();"/>
        <input type="button" value="hide()" onclick="$(para2).hide();" />
        <input type="button" value="show()" onclick="$(para2).show();" />
    </div>
 
    <p id="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus odio massa, vulputate sit amet auctor at, mollis at nisi.</p>
    <p id="para2">[toggle]Fusce pretium, mauris nec euismod adipiscing, odio nibh aliquam turpis, vel dictum tortor leo eu libero. Mauris non feugiat risus.[/toggle]</p>
    <p id="para3">Etiam luctus neque nec tortor mollis dignissim. Proin interdum laoreet risus in rhoncus. Praesent vel erat ligula, a auctor nulla.</p>
 
</body>
</html>

 

源码下载：

 

Hide_show_content.rar

 

 

1
顶
0
踩
分享到：
| 在HTML中的一个对象应用多个 class 名称
评论
发表评论

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

相关推荐

    jquery 隐藏显示行

    在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括隐藏和显示元素。本文将深入探讨如何利用 jQuery 实现表格行的隐藏与显示功能，同时也会涉及到一些基本的 HTML 和 ...

    jQuery如何隐藏部分文本。

    本篇文章将深入探讨如何使用jQuery来隐藏页面中的部分文本。首先，我们需要理解jQuery的基本用法，然后学习如何选择元素，并应用CSS样式来达到隐藏文本的效果。 ### jQuery基本介绍 jQuery是由John Resig于2006年...

    jQuery实现表格内容的查找和隐藏

    本篇文章将详细讲解如何利用jQuery实现表格内容的查找和隐藏功能，这对于网页交互和用户体验提升至关重要。 首先，我们需要了解jQuery的基本用法。jQuery通过选择器（如$("#id")或$(".class")）来选取HTML元素，并...

    jquery隐藏滚动条.zip

    "jQuery隐藏滚动条"就是一个这样的解决方案，它利用jQuery库和CSS3技术来实现滚动条的动态显示与隐藏，尤其适用于创建具有悬浮效果的滚动条。这个项目中的"jiaoben1813"可能是代码示例或教程的一部分。 首先，...

    jquery+鼠标经过显示全部内容离开隐藏部分内容

    通过jQuery，我们可以在用户触发`mouseover`事件时动态创建一个新的`div`元素，用以显示完整的`details_val`内容。这里使用了`append()`方法将新创建的元素添加到`body`中，然后使用`css()`方法来设置其位置，最后...

    完美的鼠标放上去jquery显示隐藏层

    这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时动态显示或隐藏元素的技巧。这种技术能够使用户在浏览网页时更加直观地获取信息，比如悬停在某个按钮或链接上时，弹出相关的提示信息。 ...

    jquery隐藏滚动条 jquery隐藏滚动条代码下载.zip

    通过解压并运行这些文件，你可以看到如何在实际项目中实现jQuery隐藏滚动条的功能。记得在本地环境或服务器上测试代码，以确保其正常工作。 总结一下，隐藏滚动条可以通过CSS的`overflow`属性实现，而jQuery则提供...

    jQuery隐藏显示密码插件

    jQuery隐藏显示密码插件就是为了解决这个问题而设计的。它允许用户在输入密码时切换显示状态，即从明文到星号或圆点的隐藏模式，增强用户对密码输入的控制感，同时也增加了安全性。 ### jQuery基础 jQuery是一个...

    jQuery隐藏样案例

    在这个“jQuery隐藏样案例”中，我们将深入探讨如何使用jQuery来控制网页元素的可见性，这是一项基本但至关重要的技能，无论是在网页布局还是交互设计中都经常被用到。 首先，jQuery提供了`hide()`、`show()`和`...

    jQuery显示隐藏DIV简单实例.zip

    本实例主要关注如何利用jQuery实现显示和隐藏DIV元素的功能，这是一种常见的页面交互手法，特别是在内容展示和空间管理上。 首先，理解基本的HTML结构。在网页中，我们通常会有一个或多个`&lt;div&gt;`元素，它们是用来...

    基于jQuery隐藏登录入口代码

    这个主题“基于jQuery隐藏登录入口代码”就是关于如何使用JavaScript库jQuery来实现这一功能的。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互等任务。在这篇文章中，我们...

    jQuery_内容隐藏式留言显示特效

    **jQuery 内容隐藏式留言显示特效** 在网页设计中，动态效果往往能提升用户体验，让人眼前一亮。"jQuery_内容隐藏式留言显示特效"就是一种利用jQuery库实现的创新设计，它通过隐藏和显示留言内容，为用户提供了一种...

    jQuery密码显示隐藏登录表单

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将详细探讨"jQuery密码显示隐藏登录表单"这一主题，涵盖如何利用jQuery实现登录表单中密码字段的可见性...

    jquery显示隐藏菜单实例

    "jquery显示隐藏菜单实例"是一个常见的需求，尤其是在构建响应式或者交互式的网站时。这个实例展示了如何利用jQuery轻松实现菜单的显示和隐藏功能，以提高用户体验。 首先，我们需要在HTML结构中定义菜单元素。通常...

    jquery内容模糊隐藏.zip

    在这个“jquery内容模糊隐藏.zip”文件中，我们可能会发现如何使用jQuery实现内容的模糊隐藏效果，这是一种在网页上优雅地隐藏或显示信息的技巧。这种技术在网页设计中常用于创建动态的用户体验，比如搜索结果预览、...

    jQuery隐藏收缩在线客服 jQuery隐藏收缩在线客服网页特效.zip

    本项目名为“jQuery隐藏收缩在线客服”，显然它旨在实现一种用户界面效果，使得在线客服功能可以以隐藏/收缩的形式存在，只在需要时展示，以提高用户体验。 首先，我们需要理解CSS（层叠样式表）在其中的作用。CSS...

    jquery基于Bootstrap隐藏侧边栏菜单代码

    本文将深入探讨如何使用 jQuery 和 Bootstrap 实现一个可隐藏的侧边栏菜单，以及涉及到的相关知识点。 首先，Bootstrap 是一个开源的前端框架，它提供了丰富的组件和样式，如响应式布局、导航栏、模态框等，使得...

    jquery+css3渐变显示“更多”隐藏内容

    标题中的“jquery+css3渐变显示“更多”隐藏内容”指的是使用JavaScript库jQuery和CSS3的过渡效果来实现一种动态展示隐藏文本的功能。当用户点击“更多”按钮时，原本被隐藏的文字会逐渐显现出来，给用户带来平滑的...

    jquery点击按钮隐藏父页和引用页的iframe

    本篇文章将深入讲解如何使用`jQuery`库来实现这个功能。 首先，`jQuery`是一个强大的JavaScript库，它提供了简洁的API，让开发者可以轻松地操作DOM（文档对象模型）、处理事件和执行动画。在本例中，我们将利用`...

    jQuery显示隐藏和复制表单密码字段插件

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本篇文章将详细讲解一个特定的jQuery插件——用于显示、隐藏和复制表单中密码字段的插件。 首先，...

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