JQuery显示隐藏DIV的方法及代码实例

1. 如果在载入是隐藏：


代码如下:

<head>
<script language="javascript">
function HideWeekMonth()
{
    $("#tt1").hide();
    $("#tt2").hide();
}
</script>
</head>

<body onLoad="HideWeekMonth()">
</body>

2. 动态隐藏和显示：

代码如下:

<td>
                <!-- 能用
                <input id="btnShow" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" />
                <input id="btnHide" type="button" value="<?php echo $ini_array['module.insert'];?>" class="btn" />
                -->
                <!-- 直接使用按钮的id没有问题
                <input id="tt" type="text" name="title" maxlength="50" size="50"></td> -->
                <input id="btnOne" type="radio" name="frequence" value="1" checked='checked'><?php echo $ini_array['time.one']?>    
                <input id="btnDay" type="radio" name="frequence" value="2"><?php echo $ini_array['time.day']?>    
                <input id="btnWeek" type="radio" name="frequence" value="3"><?php echo $ini_array['time.week']?>    
                <input id="btnMonth" type="radio" name="frequence" value="4"><?php echo $ini_array['time.month']?>    
                <br>
                <!-- 能用
                <div id="tt1"><input type="text" name="title" maxlength="50" size="50" value="tt1"></div>
                <div id="tt2"><input type="text" name="title" maxlength="50" size="50" value="tt2"></div>
                -->
                <div id="tt1">               
                    <br>
                    1 <input type="checkbox" value="1" name="w1">    
                    2 <input type="checkbox" value="1" name="w2">    </div>
                <div id="tt2">               
03 <input type="checkbox" name="m3">    
                    04 <input type="checkbox" name="m4">    </div>
          </td>

<!-- 绑定事件似乎要写在被绑定对象的后面 -->
    <script type="text/javascript" >
        $("#btnOne").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); });
        $("#btnDay").bind("click", function(event) { $("#tt1").hide(); $("#tt2").hide(); });
        $("#btnWeek").bind("click", function(event) { $("#tt1").show(); $("#tt2").hide(); });
        $("#btnMonth").bind("click", function(event) { $("#tt1").hide(); $("#tt2").show(); });
    </script>

以上代码之前，可能还要加上这句话：

代码如下:

<script type="text/javascript" src="../../scripts/jquery.min.js"></script>

使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。

$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("#id").css('display','none');
$("#id").css('display','block');
或
$("#id")[0].style.display = 'none';

赞 (0)

相关推荐

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • 基于jquery实现的定时显示与隐藏div广告的实现代码

    下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTimeout函数来实例,下面我给大家分享我的方法.html页面中我们随便放些东西 复制代码 代码如下: <div class="toolbarframe" style="display:none;"><a href="http://www.jb51.net" target="_blan

  • jquery和js实现对div的隐藏和显示方法

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下: $("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() js对div的显示和隐藏: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 复制代码 代码如下: style="visibility: none;" document.getElementById("typediv1").style.vi

  • jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

    本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏.分享给大家供大家参考,具体如下: 研究了一下toggle之click触发DIV的显示与隐藏,现在把代码发上来. HTML代码: <input type="button" id="btn" title="Click me 你会看到效果" value="点击此处" /> <div id="content" styl

  • jquery之超简单的div显示和隐藏特效demo(分享)

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

  • jquery显示和隐藏div特效实例

    $(document).ready(  function(){});function hiden(){$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast} function slideToggle(){$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上}func

  • 基于JQuery的浮动DIV显示提示信息并自动隐藏

    复制代码 代码如下: /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @param int time 显示的时间(按秒算), time > 0 * @sample <a href="javascript:void(0);" onclick="showTips( '操作成功', 100, 3 );">点击

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

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

  • JQuery显示隐藏DIV的方法及代码实例

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

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

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

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

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

  • JS实现点击链接切换显示隐藏内容的方法

    JS实现点击链接切换显示隐藏内容的方法

    本文实例讲述了JS实现点击链接切换显示隐藏内容的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer

  • jquery对输入框内容的数字校验代码实例

    这篇文章主要介绍了jquery对输入框内容的数字校验代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接在input属性框中添加keyup事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js&quo

  • Vue切换div显示隐藏,多选，单选代码解析

    切换div显示隐藏 1)单个item下的部分dom结构,显示或隐藏切换,不会修改其它同级dom的显示/隐藏 template dom结构 <div class="list-item" v-for="(list,index) in jobList"> <p class="job-name">{{list.jobName}}</p> <p class="job-info"> <

  • 修改或扩展jQuery原生方法的代码实例

    修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-

  • 右键显示(隐藏)扩展名的bat代码

    "显示/隐藏 系统文件"需右键单击任意文件夹或文件才能显示菜单 "显示/隐藏 扩展名"需右键单击任意文件夹里的空白处才能显示菜单 右键显示(隐藏)扩展名及系统文件.bat 复制代码 代码如下: @echo off reg delete "HKCR\CLSID\{00000000-0000-0000-0000-000000000012}" /f >nul 2>nul reg delete "HKLM\SOFTWARE\Clas

  • jQuery通用的全局遍历方法$.each()用法实例

    本文实例讲述了jQuery通用的全局遍历方法$.each()用法.分享给大家供大家参考,具体如下: 1.test.json文件代码: [ { "username": "张三", "content": "沙发." }, { "username": "李四", "content": "板凳." }, { "username": &q

  • jquery+css实现Tab栏切换的代码实例

    jquery+css实现Tab栏切换的代码实例

    前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设

随机推荐