jQuery元素的隐藏与显示实例

本文实例讲述了jQuery元素的隐藏与显示的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/jscript" src="jquery/jquery-1.10.2.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function () { 
            $("#but1").click(function () { 
                $("#tex1").hide(); 
            }); 
        }) 
        $(document).ready(function () { 
            $("#but2").click(function () { 
                $("#tex1").show(); 
            }); 
        })     
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <input type="button" value="客户端隐藏"  onclick="document.getElementById('tex1').style.display='none'" /> 
    <input type="button" value="客户端显示"  onclick="document.getElementById('tex1').style.display='inline'" /> 
    <input type="button" value="$客户端隐藏" id="but1" /> 
    <input type="button" value="$客户端显示" id="but2" /> 
    <input type="text" id="tex1" /> 
    </div> 
    </form> 
</body> 
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery显示隐藏元素的实现代码

    $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定没有display属性 $("#firstStep").hide(500);而且可以设置时间:("#firstStep").hide

  • 怎样判断jQuery当前元素是隐藏还是显示

    $(this).is(":hidden"); //如果元素是隐藏的话,则返回true is挺好用的,他能够用jQuery选择器作为参数,特别是跟jQuery里面的选择器里面那些以冒号开头的筛选符配合使用,实现各种各样的判断.如: ":checked,:hidden"等等.给个例子: <head> <script src="jquery-1.7.1.js" type="text/javascript">&

  • Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)

    一.隐藏和显示元素 复制代码 代码如下: $('#button_save_12').css('display', 'none');  // 隐藏按钮$('#button_save_12').css('display', 'display');  // 显示按钮 // 或者采取 复制代码 代码如下: $('#button_save_12').hide();$('#button_save_12').show(); 二.设为禁用,只读 复制代码 代码如下: $('#button_save_12').a

  • Jquery显示、隐藏元素以及添加删除样式

    复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func

  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    jQuery判断元素是否显示 是否隐藏的简单实现代码 var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 if(!node.is(':visible')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visib

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • JS加jquery简单实现标签元素的显示或隐藏

    显示: 复制代码 代码如下: var ul = document.getElementById("opinionSelect"); ul.style.display = 'block'; 隐藏:$("#opinionSelect").fadeOut("fast");

  • jQuery控制元素隐藏和显示

    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); //点击id="hide"元素时,隐藏所有<p>标签内容: $("#show").click(function(){ $("p").show(); }); //点击id=

  • jQuery元素的隐藏与显示实例

    本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>      <script type="text/jscript" src="jquery/jqu

  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    本文实例讲述了jQuery实现侧边栏隐藏与显示的方法.分享给大家供大家参考,具体如下: web项目中经常会出现左侧侧边栏,右侧显示内容的web页面. 效果如图: 如何实现点击本周食谱,本周食谱的列表隐藏或显示切换,并关闭下周食谱列表显示,点击下周食谱,让下周食谱的列表隐藏切换显示,并关闭本周食谱列表显示 实现思路: 1.布局: 布局顶部的topDiv,左侧的leftDiv(optionDiv,navListUl), 布局右侧的contentDiv. 布局如图: 2.js控制optionDiv和n

  • jQuery实现切换隐藏与显示同时切换图标功能

    HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <

  • js控制li的隐藏和显示实例代码

    js控制li的隐藏和显示实例代码

    html页面 <div class="favorite_list"> <div class="list_type" id="list_type"> <ul class="all"> <li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class=

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • JQuery DIV 动态隐藏和显示的方法

    1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

  • jQuery简单实现隐藏以及显示特效

    简单的 隐藏以及显示的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("#hide").click(function

  • vue实现点击隐藏与显示实例分享

    如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示.实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可. 1.新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签.

  • Jquery实现控件的隐藏和显示实例

    复制代码 代码如下: <!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="

随机推荐