编程 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 相关文章推荐

总结AJAX相关JS代码片段和浏览器模型

Aug 15 Javascript

添加JavaScript重载函数的辅助方法2

Jul 04 Javascript

50款非常棒的 jQuery 插件分享

Mar 29 Javascript

JavaScript版的TwoQueues缓存模型

Dec 29 Javascript

jquery实现拖拽调整Div大小

Jan 30 Javascript

C#中使用迭代器处理等待任务

Jul 13 Javascript

AngularJS 遇到的小坑与技巧小结

Jun 07 Javascript

js css实现垂直方向自适应的三角提示菜单

Jun 26 Javascript

简单实现jQuery级联菜单

Jan 09 Javascript

JS实现css hover操作的方法示例

Apr 07 Javascript

微信小程序中换行空格（多个空格）写法详解

Jul 10 Javascript

详解ES6中class的实现原理

Oct 03 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