编程 Javascript

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

Posted in Javascript onApril 16, 2015

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';

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

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype中dom对象方法汇总

Sep 17 Javascript

jQuery实现动态添加和删除一个div

Aug 12 Javascript

jquery彩色投票进度条简单实例演示

Jul 23 Javascript

深入理解React中es6创建组件this的方法

Aug 29 Javascript

JavaScript实现页面定时刷新（定时器，meta）

Oct 12 Javascript

浅析jQuery操作select控件的取值和设值

Dec 07 Javascript

基于js中的原型(全面讲解)

Sep 19 Javascript

JavaScript实现离开页面前提示功能【附jQuery实现方法】

Sep 26 jQuery

axios发送post请求springMVC接收不到参数的解决方法

Mar 05 Javascript

详解js中let与var声明变量的区别

Apr 05 Javascript

JavaScript中Dom操作实例详解

Jul 08 Javascript

javascript canvas API内容整理

Feb 16 Javascript

JQuery使用$.ajax和checkbox实现下次不在通知功能

Apr 16 #Javascript

jQuery Ajax使用实例

Apr 16 #Javascript

javascript等号运算符使用详解

Apr 16 #Javascript

php常见的页面跳转方法汇总

Apr 15 #Javascript

jquery图片切换实例分析

Apr 15 #Javascript

JavaScript实现的encode64加密算法实例分析

Apr 15 #Javascript

JavaScript实现拖拽网页内元素的方法

Apr 15 #Javascript