js显示隐藏div怎么写(如何通过js实现隐藏和显示DIV)

2025-07-10 21:32:24分类：首页 > 知识

1.如何通过js实现隐藏和显示DIV

如下

style="display: none;"

document.getElementById("typediv1").style.display="none"；//隐藏

document.getElementById("typediv1").style.display=""；//显示

此JS代码中，没有用try——Catch捕获错误，代码如下：

<script language="javascript">

//创建一个showhidediv的方法，直接跟ID属性

function showhidediv(id){

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}

</script>

<div id="show" onm ouseMove='showhidediv("msg")';>；鼠标移动这里</div><；！--这里是点击div,ID要下面的ID-->

<div id="msg" style="display:none;">；出现显示的内容</div> <；！--这里是MsgDiv-->

onMouseMove='showhidediv("msg")'； 这里是鼠标动作，可以替换成Click或其他！

再次升级，做两个层之间的切换：

<script language="javascript">

//创建一个showhidediv的方法，直接跟ID属性

function showhidediv(id){

var age=document.getElementById("msg_2");

var name=document.getElementById("msg_1");

if (id == 'name') {

if (name.style.display=='none') {

age.style.display='none';

name.style.display='block';

}

} else {

if (age.style.display=='none') {

name.style.display='none';

age.style.display='block';

}

}

}

</script>

<div id="show" style="float:left;" onm ouseMove='showhidediv("name")';>Name:</div><div id="show" style="float:left;" onm ouseMove='showhidediv("age")';>Age:</div>

<div id="msg_1" style="display:none;float:left;">；林雨林</div>

<div id="msg_2" style="display:none;float:left;">18</div>

2.js显示和隐藏div

3个div分别给3个id，好选择

<div id="item1" class="licaiMain3 licaiMain4">

<h1>；显示1 <a href="#" target="_blank">；显示2</a><a href="#" target="_blank">；显示3</a></h1>

<p class="wenQ">Q：显示1</p>

<p class="daA">A:<a href="#" target="_blank">；显示11</a></p>

<p class="wenQ">Q：显示11</p>

<p class="daA">A：显示111</p>

</div>

<div id="item2" class="licaiMain3 licaiMain4 none">

<p class="wenQ">Q：显示2</p>

<p class="daA">A:<a href="#" target="_blank">；显示22</a></p>

<p class="wenQ">Q：显示22</p>

<p class="daA">A：显示222</p>

</div>

<div id="item3" class="licaiMain3 licaiMain4 none">

<p class="daA">A:<a href="#" target="_blank">；显示33</a></p>

<p class="wenQ">Q：显示33</p>

<p class="daA">A：显示333</p>

</div>

js如下

//鼠标移入

getDom("item1").onmouseover=function(){

getDom("item2").style.display="none";

getDom("item3").style.display="none";

}

//鼠标移出

getDom("item1").onmouseout=function(){

getDom("item2").style.display="block";

getDom("item3").style.display="block";

}

function getDom(id){

return document.getElementById(id);

}

3.原生JS实现点击一个div隐藏或者显示另外一个div怎么写

1. 第一个div添加onclick（)方法。

2. 方法里面代码如下：

if(document.getElementById("B").style.display= ="none")

3. { //B是另一个div

document.getElementById("B").style.display= "block";

}

4. else{

document.getElementById("B").style.display= "none";

}

5. <meta ; charset=gb2312"/>

6. <title></title><script language="JavaScript" type="text/JavaScript">

7. function toggle(targetid){if (document.getElementById)

8. {target=document.getElementById(targetid);

9. if (target.style.display=="block"){target.style.display="none"; } else {target.style.display="block"; }

4.JS控制DIV的显示与隐藏

javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位

方法一：

document.all["PanelSMS"].style.visibility="hidden";

document.all["PanelSMS"].style.visibility="visible";

方法二：

document.all["PanelSMS"].style.display="none";

document.all["PanelSMS"].style.display="inline";

方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static

方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic

js代码如下，新建一个txt文件，复制进去，保存并修改文件后缀为js（例open.js）即可。程序代码：

function showhidediv(id){

try{

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}catch(e){}

}

5.js隐藏显示DIV

隐藏和显示div的方式有两种：方式1：隐藏后仍占有页面空间，显示空白div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden"；//隐藏document.getElementById("typediv1").style.visibility="visible"；//显示方式2：隐藏后释放占用的页面空间通过设置display属性可以使div隐藏后释放占用的页面空间.style="display: none;"document.getElementById("typediv1").style.display="none"；//隐藏document.getElementById("typediv1").style.display=""；//显示。

6.JS CSS 显示隐藏DIV 层

你这个问题，不就是不想写两遍同样的css样式么，

把ID换成class不行，因为js没法通过class控制div的属性

你可以id和class一起写啊，id用于js调用，class用来写样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "1/DTD/xhtml1-transitional.dtd">

<html xmlns="">

<head>

<meta ; charset=gb2312" />

<title>；无标题文档</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function toggle(targetid){

if (document.getElementById){

target=document.getElementById(targetid);

if (target.style.display=="block"){

target.style.display="none";

} else {

target.style.display="block";

}

}

}

-->

</script>

<style type="text/css">

.div{ border:1px #06F solid;height:50px;width:100px;display:none;}

a { display:block}

</style>

</head>

<body>

<a href="#" onclick="toggle('div1')">；显示/隐藏</a>

<div id="div1" class="div"></div>

<a href="#" onclick="toggle('div2')">；显示/隐藏</a>

<div id="div2" class="div"></div>

</body>

</html>

这样不就可以了么

js显示隐藏div怎么写

转载请注明出处育才学习网 » js显示隐藏div怎么写(如何通过js实现隐藏和显示DIV)

js点击显示隐藏div js设置div显示隐藏 js实现div显示和隐藏
知识

万圣节活动前言怎么写(万圣节的活动)

阅读(261)

本文主要为您介绍万圣节活动前言怎么写，内容包括万圣节活动方案，万圣节的活动，万圣节晚会策划书。万圣节的节日活动：万圣节南瓜灯万圣节“杰克灯”（南瓜灯）的样子十分可爱，做法也极为简单。将南瓜掏空，然后在外面刻上笑眯眯的眼睛和大嘴巴，

知识

台词课总结怎么写(台词总结怎么写)

阅读(285)

本文主要为您介绍台词课总结怎么写，内容包括台词总结怎么写作文600字，台词总结怎么写作文600字，一篇500字的初中台词总结急需。一句温暖的话，如天籁，嘹响在坎坷的成长路上；一句温暖的话，似清泉，浇灌在干涸的心灵上；一句温暖的话，像荫庇，遮挡在灼热

知识

就读于电大招工简历怎么写(招工简历怎么写)

阅读(313)

本文主要为您介绍就读于电大招工简历怎么写，内容包括招工简历怎么写，招聘个人简历怎样写，电大作业简述简历写作的要点。你所要的是找工作的应聘简历吧，给你参考如下：简历的设计原则真实。简历从内容上讲必须真实，比如选了什么课，就写什么课；如果

知识

起点写青春校园怎么样(起点写青春校园类小说,有前途吗)

阅读(263)

本文主要为您介绍起点写青春校园怎么样，内容包括起点写青春校园类小说,有前途吗，起点的学生读者多吗如果写青春校园的文章可以吗能红吗，在起点中文网哪个区域写青春校园小说最好。红袖添香确实不错。报酬高，但是竞争很激烈！你可以试着给以下

知识

家长变化的童谣怎么写(和家长一起写一篇童谣怎么写)

阅读(266)

本文主要为您介绍家长变化的童谣怎么写，内容包括关于家乡变化的童谣，有关家乡变化的童谣，一篇反映家乡变化的童谣急急急。2.学校像个家学校像个家，师生喜欢她，知识多多学，成才建家园，老师辛苦了，别忘了九月十日，祝老师节日快乐.3.老师，节日好上操

知识

设计图应该怎么写(设计方案怎么写包括什么主要内容)

阅读(306)

本文主要为您介绍设计图应该怎么写，内容包括如何写室内设计书面材料或画设计图，设计方案怎么写包括什么主要内容，设计作品的说明格式,应该怎么写。撰写设计方案有9项要点。1.题目。题目是策划书具体目的的体现，因此一定要写清楚，比如要举办什

知识

体育之星申请书怎么写(校园体育之星申请书怎么写)

阅读(345)

本文主要为您介绍体育之星申请书怎么写，内容包括校园体育之星申请书怎么写好吧,勤奋之星也可以一年被选一次,，校园体育之星申请书怎么写，校园体育之星申请书怎么写。我从小喜好运动，每有时间就和朋友们一起打排球，由于经常锻炼，我身体很好，也练

知识

产业项目简介怎么写(大学生创业项目简介怎么写)

阅读(626)

本文主要为您介绍产业项目简介怎么写，内容包括大学生创业项目简介怎么写，项目简介怎么写400字，大学生创业项目简介怎么写。去百度文库，查看完整内容>内容来自用户：轩辕月凝1大学生创业计划“反射式LED电子黑板”项目简介公司以技术开发为导向

知识

婚宴用酒条幅怎么写(摆酒请帖怎么写)

阅读(273)

本文主要为您介绍婚宴用酒条幅怎么写，内容包括婚礼条幅内容怎么写，婚礼现场条幅怎么写，婚宴和满月酒一起做,对联应该怎么写。结婚邀请函上书写的文字一般是： 送呈：XXX先生台启 公历 年 月 日 谨订于（星期日） 农历 年 月 日 为XX先生和XX小姐举

知识

液晶温度显示贴怎么用(温度贴的感温原理是什么)

阅读(385)

本文主要为您介绍液晶温度显示贴怎么用，内容包括洗鼻器液晶温度显示贴怎么用，洗鼻器液晶温度显示贴怎么用，液晶显示保护膜怎么贴啊。有种叫液晶体温计的贴片是利用液晶测温技术，通过颜色来显示温度，能安全准确的测量出温度，包括人体额温、水温

知识

酒店跑子屏怎么写(酒店显示屏标语怎么写)

阅读(383)

本文主要为您介绍酒店跑子屏怎么写，内容包括酒店显示屏标语怎么写，酒店显示屏该怎么写，出国留学请客,酒店滚动屏怎么写。创一流工作业绩，树立交通文明新风。＂再提高、上水平＂ 确保工程质量和安全。精心设计是工程质量的灵魂，规范施工是工程质量

知识

nodejs里path参数怎么写(nodejs的环境变量怎么配置)

阅读(306)

本文主要为您介绍nodejs里path参数怎么写，内容包括nodejshttppostpath怎么写，nodejs的环境变量怎么配置，node.jspath的写入js内容格式怎么写。ubuntu安装jdk,ubuntu设置java环境变量，ubuntu安装jdk,ubuntu设置java环境变量下载jdk-6u12-

[/e:loop]