Jquery相关的<div>标签的隐藏与显示及判断显示或隐藏状态

最新推荐文章于 2024-05-27 21:51:51 发布

原创最新推荐文章于 2024-05-27 21:51:51 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #元素显示 #元素隐藏 #元素状态判断

Java工作专栏收录该内容

4 篇文章

订阅专栏

1.visibility与display之间的区别:
①div的visibility属性可以控制div的显示和隐藏，但是隐藏后页面显示空白，仅限于隐藏内容，所在位置仍存在。
②display属性可以使div隐藏后释放占用的页面空间。

具体使用： ①<div class="photo-fj" id="local1" style="display:none" > //元素隐藏
②<div class="photo-fj" id="local1" style="display:block" > //元素显示

③<div class="photo-view" id="showpic2" style="visibility: hidden"> //元素隐藏
④<div class="photo-view" id="showpic2" style="visibility: visible"> //元素显示

2.Jquery控制元素显示与隐藏

1、$("#demo").attr("style","display:none;");//隐藏div

   $("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

   $("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

   $("#demo").show();//显示div

注：

$("#demo").show()表示display:block, 
$("#demo").hide()表示display:none;

3.JQuery判断元素的显示与隐藏状态

 $("#local1").is(":visible")  //是否显示，显示时为true
 $("#local1").is(":hidden")  //是否隐藏，隐藏时为true

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hjy1821

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jquery 判断元素显示或隐藏

weixin_30780221的博客

09-29

346

$().is(":hidden"); $().is(":visible"); 转载于:https://www.cnblogs.com/sallet/p/4000154.html

div隐藏与显示

qq_37029026的博客

06-29

175

div隐藏与显示 jQuery display 隐藏后，原来位置被占掉 visibility 隐藏后，原来位置还在 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").css(‘display’,‘none’); $("#id").css(‘display’,‘block’); 或者 $("#id")[0]...

参与评论您还未登录，请先登录后发表或查看评论

JQuery实现DIV的显示与隐藏

不是秃头的程序员小李

03-17

1125

1.动画 animate $(function(){ $("#div1").animate({height:"500px",width:"500px"},4000); // JQuery链式操作 //$("#div1").animate({height:"500px"},2000).animate({width:"500px"},2000); }); #div1 {

div 隐藏和显示方式

随心更博

07-08

1万+

在js中可以使用两种方式控制div的显示和隐藏，都能够实现显示和隐藏，但是又有所不同；一.方式1：隐藏后仍占有页面空间，显示空白 div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白 style="visibility: none;" //在Div中设置style属性 document.getElementById(

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% HttpSession session1 = request.getSession(); String username = (String) session1.getAttribute("username");//获取session中的账号 String realname = (String) session1.getAttribute("realname");//获取session中的姓名 //判断用户是否已经登录，如未登录则强制跳转(重定向)到登录界面 //if(username==null) response.sendRedirect("login.jsp"); %> <html> <head> <title>系统首页</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <header> <div class="left"> <%-- 无LOGO--%> <span class="title">智能电器综合管理</span> </div> <div class="right"> <%-- =realname 相当于 out.println(username); --%> <span class="userinfo"><%=realname%>(<% out.println(username); %>)</span> <span class="logout" onclick="logout()">注销</span> </div> </header> <%-- 中间有效区域 S--%> <div class="main">  <div class="left"> <div class="top">系统菜单</div> <div class="first-menu"> <div>用户管理</div> <ul> <li url="user/list.jsp">家庭成员管理</li> </ul> </div> <div class="first-menu"> <div>系统管理2</div> <ul> <li url="living/list.jsp">客厅</li> </ul> </div> </div>   <div class="right">  <iframe id="iframe" src="welcome.jsp"></iframe> </div>  </div> <%-- 中间有效区域 E--%> <footer></footer> <%-- 引用jquery代码库 --%> <script src="js/jquery-3.5.1.min.js"></script> <script> //注销功能 function logout() { //跳转到登录界面 //window.location.href="login.jsp"; //确认提示：点击确定才真正跳转，否则不做任何处理 if(confirm("确定要退出系统吗？")) window.location.href="login.jsp"; } let nowClickUl = null; //点击一级菜单，显示对应的二级菜单，再次点击则隐藏对应的二级菜单 $('.main .left .first-menu > div').on('click', function () { //显示对应的二级菜单 let ul = $(this).parent().find('> ul'); if(nowClickUl && $(this).html() !== nowClickUl.parent().find('> div').html()) { nowClickUl.hide(); } nowClickUl = ul; //判断ui当前的显示状态：隐藏-》显示显示-》隐藏 //:hidden隐藏 true=隐藏 false=显示 //if(ul.is(':hidden')) ul.show();//当前为隐藏状态,显示 //else ul.hide(); //当前为显示状态,隐藏 ul.toggle();//根据当前的显示状态，做相反操作 }); //点击二级菜单，在内容区域显示对应的网页 $('.main .left .first-menu > ul li').on('click', function () { let url = $(this).attr('url');//获取元素中的文本内容 $('#iframe').attr('src', url); }); </script> </body> </html>

07-06

<div class="top">系统菜单</div> <div class="first-menu"> <div>用户管理</div> <ul> <li data-url="user/list.jsp">家庭成员管理</li> </ul> </div> <div class="first-menu"> <div>系统管理2</div> ...

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div class="container"> <ul class="head"> <li>全部实训</li> <li>实训路径</li> <li>在线课堂</li> <li>讨论区</li> </ul> <div class="content"> <div>我是全部实训的内容</div> <div>我是实训路径的内容</div> <div>我是在线课堂的内容</div> <div>我是讨论区的内容</div> </div> </div> <script> $(function(){ //tab的初始化 $(".head li").removeClass('active').eq(0).addClass('active'); $(".content div").hide().eq(0).show(); $(".head li").on('click', function(){ // index是点击的li的索引 var index = $(this).index(); //-----------begin----------- //------------end------------ }) }) </script> <style> .container{ width: 500px; margin: 40px auto; } ul,li{ list-style-type: none; } .container ul{ overflow: hidden; background: #000; color: #fff; } .container li{ width: 100px; float: left; text-align: center; line-height: 60px; font-size: 18px; cursor: pointer; } .container li.active{ color: orange; } .container .content{ width: 460px; height: 200px; padding: 20px; background: #ccc; font-size: 18px; } </style> </body> </html> 任务描述本关任务：用 jQuery 实现一个tab切换的功能。效果图如下：相关知识为了完成本关任务，你需要掌握：1.层次选择器，2.方法show和hide， 3.操作css类的方法。层次选择器 <div class="container"> <p> <span>第一个p标签下的span</span> <span>第一个p标签下的第二个span</span> </p> <p> <i>i标签</i> <span>第二个p标签下的span</span> </p> </div> 如何获取到上面第一个p标签下所有的span标签？这里主要用层次选择器获取一下：第一步：获取到类container：$(".container")；第二步：获取到container下第一个p标签：$(".container p:first")；第三步：获取到第一个p标签下所有的span标签：$(".container p:first span")。从上面可以看出来，层次选择器和Dom结构是相匹配的， show()和hide() <p class="toggle">错误提醒</p> <p>展示的内容</p> 对于类toggle，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用show()和hide()：出现：$(".toggle").show() 隐藏：$(".toggle").hide() show()的原理相当于css中的 display:block; hide()的原理相当于css中的 display:none; 类的添加和删除 <div id="box"></div> .active{ background: orange;} .btn{} 给上面的div添加类active和btn，该如何实现呢？这里用addClass()方法： $("#box").addClass("active btn"); 现在要删除一个类btn，这里用removeClass()方法： $("#box").removeClass("btn"); 编程要求 jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现tab切换的功能。要求如下：当点击上面的tab选项卡时，下面会显示对应的内容，添加的类为active； tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；注：提供的代码不允许修改，只允许填充begin至end中间的代码。注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

10-24

<div class="content active">内容1</div> <div class="content">内容2</div> <div class="content">内容3</div> 但是，请注意，题目中并没有给出具体的HTML结构，因此我们需要根据常见的做法来编写通用的代码...

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>选项卡</title> <style> /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f5f5f5; display: flex; justify-content: center; padding: 20px; margin-top: 50px; } /* 选项卡容器 */ .tab-container { width: 500px; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* 按钮容器 */ .tab-buttons { display: flex; } /* 按钮通用样式 */ .tab-btn { flex: 1; padding: 12px 0; border: none; cursor: pointer; font-size: 16px; transition: all 0.3s ease; color: #333; } /* 按钮默认背景色（可根据需求调整） */ .tab-btn:nth-child(1) { background-color: #c3e6cb; } /* HTML/CSS 绿色 */ .tab-btn:nth-child(2) { background-color: #b8daff; } /* JS DOM 蓝色 */ .tab-btn:nth-child(3) { background-color: #f5c6cb; } /* JQuery 红色 */ /* 按钮激活态（覆盖默认背景色） */ .tab-btn.active { background-color: #007bff; /* 统一激活色，也可单独设置 */ color: #fff; font-weight: bold; } /* 按钮 hover 效果（可选） */ .tab-btn:hover { opacity: 0.9; } /* 内容区域 */ .tab-contents { padding: 20px; } .tab-content { display: none; /* 默认隐藏 */ } /* 激活态内容显示 */ .tab-content.active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="tab-container">  <div class="tab-buttons"> <button class="tab-btn active" data-target="html-css">HTML/CSS</button> <button class="tab-btn" data-target="js-dom">Javascript DOM</button> <button class="tab-btn" data-target="jquery">JQuery</button> </div>  <div class="tab-contents"> <div id="html-css" class="tab-content active"> <h2>HTML/CSS</h2> <p>本教程包含了数百个 HTML 实例。使用本站的编辑器，您可以轻松实现在线修改 HTML，并查看实例运行结果。</p> </div> <div id="js-dom" class="tab-content"> <h2>Javascript DOM</h2> <p>本教程包含了大量的 JavaScript 实例，您可以点击 "尝试一下" 来在线查看实例。</p> </div> <div id="jquery" class="tab-content"> <h2>JQuery</h2> <p>jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。</p> </div> </div> </div> <script> // 1. 获取元素 const tabButtons = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); // 2. 绑定点击事件 tabButtons.forEach(btn => { btn.addEventListener('click', () => { // 移除所有激活态 tabButtons.forEach(btn => btn.classList.remove('active')); tabContents.forEach(content => content.classList.remove('active')); // 激活当前按钮和内容 btn.classList.add('active'); const targetId = btn.getAttribute('data-target'); document.getElementById(targetId).classList.add('active'); }); }); </script> </body> </html> 运行一下大致效果

07-03

<p>活动标签通常通过添加<code>.active</code>类来高亮显示。</p> </div> <div class="content"> <h3>JavaScript交互逻辑</h3> <p>JavaScript处理用户交互：</p> <ol> <li>监听标签点击事件，切换活动状态</...

最新发布

11-25

<div class="showmore"><a href=""><span>显示全部品牌</span></a></div> ``` - “显示更多”按钮区域，初始文本为“显示全部品牌”。 ```html </div> ``` - 结束容器。 ```html </body></html> ``` - 结束主体和...

07-04

--注意路径，假设admin.js与adminadd.html在同一目录--><script>layui.use(['form','layer'], function(){$ =layui.jquery;var form= layui.form;var layer= layui.layer;//自定义验证规则form.verify({repass: ...

如何在 jQuery 中检查一个元素是否隐藏

Jerry学长

05-27

1101

在前端开发中，我们常常需要判断一个元素是否隐藏。在 jQuery 中，有多种方式可以实现这一点。然而，并不是所有的解决方案都适用于所有情况。为此，我写了一个通用的解决方案来应对各种复杂情形。本文将详细介绍这个方法及其使用方式。

[1097]DIV的显示与隐藏

周小董

01-14

725

文章目录一.不占位二.占位 *********************div的显示和隐藏************************************ 一.不占位 1.隐藏 div对象.style.display = “none”; 2.显示 div对象.style.display = “block”; 点击的时候,第一次不能正常显示，需要点第二次…为什么? 原因是: 内嵌样式设置了div 的 display: none 在js代码中无法获得内嵌样式display 期望得到none 实质得到""

CSS 实现div显示或隐藏的三种方法（display 和 visibility的区别）