`

JQuery显示隐藏DIV (一)

jQueryJavaScriptXHTMLHTMLXML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>StripingTable</title>
        <script type="text/javascript" src="http://www.wozaishuo.com.cn/example/jquery/jquery-1.2.1.js"></script>
        <script type="text/javascript">
        <!--
            $(document).ready(function(){ });
            
            //隐藏和显示div层
            function changeDisplay(){
                var helloDivObj = $("#helloDiv");
                var buttonObj = $("#btnDisplay");
                var val = buttonObj.attr("value");
                if(val=="隐藏"){
                    helloDivObj.hide();
                    buttonObj.attr("value","显示");
                }else{
                    helloDivObj.show();
                    buttonObj.attr("value","隐藏");
                }
                          // var helloDivObj = $("#helloDiv").toggle(); //甚至只需要这一句搞定切换隐藏与显示            
	}
        -->
        </script>
    </head>
    <body>
        <div class="title_a">一、JQuery核心库</div>
        <div class="title_b">(一)、jQuery(e­xpression,[context])用法!</div>
        <div class="title_c">3.jQuery(elements)</div>
        将一个或多个DOM元素转化为jQuery对象。这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。<p></p>
        
        <input id="btnDisplay" type="button" value="隐藏" onclick="changeDisplay()"/>
        <div id="helloDiv">
        Hello,everyone<p></p>
        Hello,everytwo<p></p>
        Hello,everythree<p></p>
        </div>
    </bdoy>
</html>

 

分享到：
| jstl的c:forEach标签
评论
3 楼 爱喝牛奶的娃娃 2011-11-21  
骗人
2 楼 fengzhiyin 2010-06-30  
已修复，错误原因是将js函数的结束}注释了导致。
1 楼 spp_1987 2010-06-24  
报错啊
发表评论

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

相关推荐

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

    总结来说，jQuery显示和隐藏DIV是网页动态效果的基础，通过简单的API调用可以轻松实现各种交互。这种技术广泛应用于菜单、侧边栏、内容区域的展开与收起，提升用户体验。了解并掌握这些技巧对于任何前端开发者都是...

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

    在网页设计和开发中，交互性是提升用户体验的关键因素之一，而“完美的鼠标放上去jquery显示隐藏层”正是实现这种交互效果的一种技术手段。这个标题所指的是一种使用JavaScript库jQuery来实现在鼠标悬停（hover）时...

    Jquery弹出DIV

    "Jquery弹出DIV"是指利用jQuery来实现一个可交互的模态对话框（通常称为弹出窗口或浮层），在网页上显示额外的信息或者进行一些用户交互。模态对话框通常是网页中的一个浮动元素，可以覆盖页面的其他部分，直到用户...

    JavaScript 动态隐藏、显示DIV 页面刷新后也不会改变隐藏状态

    使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到，当页面刷新时，也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...

    JQuery 动态生成DIV、Table并处理数据

    标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素，特别是DIV和Table，并且处理其中的数据。这在Web开发中非常常见，尤其是在构建交互式用户界面时。下面将详细阐述这...

    JqueryUI控制可拖动隐藏DIV

    总结起来，"JqueryUI 控制可拖动隐藏DIV"是一种利用 jQuery UI 库实现的交互功能，它可以增强用户的网页体验。通过 `draggable()`、`hide()` 和 `show()` 方法，我们可以创建出既可拖动又可隐藏的元素，并且可以自由...

    JQuery-DIV弹窗

    "JQuery-DIV弹窗"是指利用jQuery实现的一种弹出窗口效果，通常用于显示通知、确认信息或进行表单输入等场景。这种弹窗在用户交互中起到关键作用，因为它可以吸引用户的注意力并提供一个独立的操作空间。 在描述中...

    jquery_div.rar_div显示特效_jquery_div

    3. 使用jQuery显示和隐藏`div`：jQuery提供了`show()`和`hide()`方法来改变元素的可见状态。例如，我们可以通过以下代码实现点击按钮显示或隐藏`div`： ```html 切换显示 $(document).ready(function() { $(...

    Div显示与隐藏网页制作

    2. **jQuery显示和隐藏Div**： - `.hide()`和`.show()`方法：jQuery提供了更简洁的API来处理元素的显示和隐藏。 ```javascript $('#myDiv').hide(); // 隐藏Div $('#myDiv').show(); // 显示Div ``` - 还有`....

    Jquery弹出div层窗口以及div屏幕居中,背景滤镜效果,div拖拽效果

    创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`fadeIn()`、`fadeOut()`等方法来控制div的可见性，同时通过CSS来定义其样式，如边框、填充、背景色等。以下是一个简单的示例： ```html &lt;div id=...

    jquery 滑动DIV

    本教程将详细讲解如何利用jQuery实现一个滑动DIV的效果，适用于图片轮播或移动端应用的界面交互。 首先，我们需要在HTML文件中创建一个包含待滑动内容的容器。这个容器可以是DIV元素，里面包含多张图片或其它内容。...

    JQUERY弹出模式DIV

    "JQUERY弹出模式DIV"是指使用jQuery来实现一种常见用户界面设计——模态对话框或者称为弹出窗口。这种功能在网页中很常见，用于显示警告、确认信息或者展示详细内容等。 模态对话框（Modal Dialog）是一种阻止用户...

    JQUery弹出div层窗口，附带jquery的js文件，可以直接运行

    按钮的点击事件会通过jQuery绑定到一个JavaScript函数，这个函数负责展示或隐藏div层窗口。 `popup.js`是这个项目的重点，它包含了使用jQuery实现的JavaScript代码。在`popup.js`中，开发者可能定义了一个函数，当...

    jquery弹出div

    然后，我们可以编写jQuery代码来控制div的显示和隐藏。例如，当用户点击某个按钮时，弹出div： ```html 打开弹出框 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; $(document).ready...

    JS显示隐藏DIV(动画效果)

    在网页开发中，JavaScript（JS...总结，JavaScript显示隐藏DIV的动画效果涉及到DOM操作、CSS样式控制、定时器函数以及可能的浏览器兼容性处理。这种技术在现代网页设计中广泛使用，可以显著提升用户与网页的互动体验。

    jquery实现隐藏和显示实例

    现在我们有了一个jQuery对象`$element`，可以调用它的方法来隐藏或显示元素。`hide()`方法用于隐藏元素，而`show()`方法则用于显示元素。 1. 隐藏元素： ```javascript $element.hide(); ``` 这将使id为...

    jquery模拟div多选checkbox下拉框

    这可能包括初始化方法（如`.initSelectBox()`)，设置和获取值的方法（如`.setValue()`, `.getValue()`），以及显示和隐藏下拉框的方法（如`.show()`, `.hide()`）。 6. **可访问性和兼容性**：考虑到不同的浏览器和...

    jquery div 下拉框 下拉列表

    jQuery还提供了一系列方法，如`.html()`用于改变元素内容，`.css()`用于修改样式，`.show()`和`.hide()`控制显示和隐藏。 创建一个div下拉框的基本步骤如下： 1. **HTML结构**：首先，我们需要在HTML中创建一个div...

    jquery插件弹出div

    "jquery插件弹出div"是一个基于jQuery的插件，用于创建弹出式对话框或者模态框，通常用于显示警告、确认消息或者进行表单提交等交互操作。在网页设计中，这种功能能够提升用户体验，因为它可以将用户注意力集中在...

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