jQuery事件 控制 内容的显示与隐藏

最新推荐文章于 2023-07-13 10:50:44 发布
最新推荐文章于 2023-07-13 10:50:44 发布
阅读量210 收藏
点赞数
分类专栏： jQuery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackasdfghjkl/article/details/84366346
版权

<!--  把鼠标放上去，显示内容。离开不显示内容！  -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style>
    .contentclass{display:none}
  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <script>
$(document).ready(function(){
  $(".wijclass").mouseover(function(){
            $(this).next().show()
    })
   $(".wijclass").mouseout(function(){
            $(this).next().hide()
    })
})
</script>
 <body>
      <div id="firstid">
         <h5 class="wijclass">什么是jQuery?</h5>
         <div class="contentclass">
              要学会jQuery技术，必须多js代码。
         </div>
      </div>
 </body>
</html>




<!--  单击按钮循环显示与隐藏  -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style>
    .contentclass{display:none}
  </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <script>
$(document).ready(function(){
  $(".wijclass").click(function(){
   
    var sflag  =  $(this).next().is(":visible");

      if(sflag==false){
            $(this).next().show()
    }else{
           $(this).next().hide()
    }

  })
})
</script>
 <body>
      <div id="firstid">
         <h5 class="wijclass">什么是jQuery?</h5>
         <div class="contentclass">
              要学会jQuery技术，必须多js代码。
         </div>
      </div>
 </body>
</html>

JACKASDFGHJKL
关注
专栏目录
jquery点击显示 隐藏事件
08-10
jquery点击显示 隐藏事件 button div
jQuery控制TR显示隐藏的几种方法
10-25
在本文中，我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。 首先，最常见的方法是通过ID来控制。这种方法适用于在HTML生成时为每个需要控制的TR元素分配唯一的ID。例如： ```html 这行不隐藏 这行要隐藏 这...
Jquery事件的显示与隐藏
谁念西风的博客
04-24 1235
1.Html2.绑定事件 这里判断了元素是否隐藏，如果隐藏就显示，反之也行 3.页面效果 页面加载的时候不显示div 点击的时候效果
JQUERY显示隐藏的点击绑定事件
码农小帅哥
05-19 972
$(document).ready(function(){ $('.left_nav li a').bind('click', function(){ $('.left_nav li a').each(function(i, el){ $(el).parent().removeClass('hover'); $(el).next('ul').css({'display':'none'});
jq效果 点击隐藏和显示（组织冒泡事件）
akang4152的博客
08-22 260
一个button按钮，当我点击button后弹出DIV层， 当我点击DIV层以外的地方时候把DIV隐藏 大概代码如下： <input type="button" id="js_button" /> <div id="js_div" style="width: 100px; height: 100px; display: none"> ...
jQuery 入门教程(5): 显示/隐藏内容
mapdigit
03-07 143
jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JQuery Demo&lt;/ti..
jQuery实现菜单的显示和隐藏功能示例
10-18
### jQuery选择器与事件绑定 为了实现上述功能，文中提到了使用jQuery选择器来选取特定的HTML元素，并通过`click`方法为这些元素绑定点击事件。`$("#div1")`是一个ID选择器，用于选取ID为div1的元素。一旦这个元素...
jQuery实现侧边栏隐藏与显示的方法详解
10-17
本文将详细介绍使用jQuery来实现侧边栏隐藏与显示的具体方法，这些技巧涵盖了页面布局的组织、事件处理以及利用jQuery的方法动态控制页面元素的显示状态。这些方法不仅适用于侧边栏，也可以扩展到其他页面元素上。 ...
基于jquery实现的定时显示与隐藏div广告的实现代码
10-26
1. 使用show()和hide()方法：这两个方法可以无参数调用，也可以接受一个速度参数来控制显示或隐藏的速度。例如，"slow"、"fast"或者毫秒数。 2. 使用toggle()方法：这个方法可以在元素显示和隐藏状态之间切换。 ...
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
10-22
在本文中，我们将深入探讨使用jQuery中的toggle方法来实现点击事件控制DIV元素显示与隐藏的机制，并通过实例来分析实现过程中的相关技巧。jQuery作为一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、...
jQuery中显示与隐藏的几种实现方法
weixin_30362233的博客
09-28 108
首先是body与样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
JS/jquery实现鼠标控制页面元素显隐
weixin_30849591的博客
05-17 116
最近网站要上一个活动广告横幅，当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况，码农们会经常遇到，可以通过javascript或jquery代码实现，下面就几种常见需求一起归纳一下。 mouseout和mouseleave 对于鼠标指针的移入和移出，就涉及到了mouseover、mouseout和mouseleave事件。 mouseover：当鼠标指针移到目标元素时触发...
jquery如何在点击一个按钮时显示隐藏
最新发布
TianXuab的博客
07-13 1714
首先，我们在 HTML 中添加了一个按钮和需要显示/隐藏的代码，代码的初始状态设置为。函数选择按钮的 DOM 元素，并在其上添加了一个。方法会根据元素当前的状态，自动切换显示和隐藏状态。在监听器的回调函数中，使用 jQuery 的。然后，在 JavaScript 中，我们使用。在监听器的回调函数中，我们使用。注意：在 HTML 中，我们给代码元素添加了。，在 JavaScript 中，我们使用。方法来显示或隐藏需要操作的代码。给按钮添加一个点击事件的监听器。方法来显示或隐藏代码。
jquery的隐藏和显示
m0_73030012的博客
09-17 3318
jquery的隐藏和显示
jQuery点击隐藏和显示
热门推荐
Bart_G的博客
02-21 1万+
列举几个显示/隐藏的方法点击前： 点击后: <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> <script type="text/javascript"> <body> <div id="panel"> <h5 class="head">什么是jQu
jquery控制元素的隐藏和显示的几种方法。
weixin_30788731的博客
03-07 2888
组织略显凌乱，请耐心看！ 使用jquery控制div的显示与隐藏，一句话就能搞定，例如： 1.$("#id").show()表示为display：block， $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，则切换为可见的。 3.$("#id").css...
使用jquery的click事件显示隐藏div
WhoWrongsWhere的专栏
05-26 1490
使用问题jquery的click事件显示隐藏多个面板的div时，出现问题，后面查看分析得知，应该是不能重复使用id，需要重新定义id。
hide(),show()与removeClass(),addClass()区别
louzan3191的博客
10-23 4148
hasClass() 是否存在某个class hide() 隐藏对象 show() 显示对象 removeClass() 移除一个class addClass() 添加一个class 除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示 toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。
jQuery控制div的显示与隐藏
06-02
可以使用jQuery的`show()`和`hide()`方法来控制div的显示与隐藏。 例如，以下代码可以使id为“myDiv”的div在点击按钮时显示或隐藏： ```html 点击我 这是一个div $(document).ready(function(){ $("#myButton...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值