js实现点击一个div显示另一个div

最新推荐文章于 2024-07-17 11:37:40 发布
最新推荐文章于 2024-07-17 11:37:40 发布
阅读量6.3k 收藏 6
点赞数 2
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630877/article/details/81458762
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div οnclick="showDiv()" style="background-color: #999;">点击显示另一个div</div>
        <div id="111" style="display:none;background-color: #7FFFD4;">点击后显示的div</div>
    </body>
    <script type="text/javascript">  
        function showDiv(){
            //获取要显示的div对象,并显示
        document.getElementById('111').style.display="block"; 
        }    
    </script>
</html>

温文尔雅小禽兽
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
html在点击div打开另一个div,点击另一个DIV重新加载DIV
weixin_32047035的博客
06-19 1020
我有一个名为dataGridView.DataSource = null;dataGridView.DataSource = listOfSomething;的div，在pip install python-gsmmodempip install simplesmsfrom gsmmodem.modem import GsmModemfrom simplesms import pdu as gsm...
html点击一个div实现另一个div的显示与隐藏
weixin_46050275的博客
08-10 4265
1
【前端自动化】使用 JavaScript 模拟点击事件实现 x, y 坐标点击
最新发布
一位前行者的博客
07-17 419
x 和 y 坐标代表页面上的一个点的位置，其中 x 代表水平方向，y 代表垂直方向。通过这两个数值，我们可以准确地定位到页面上的某个点，并在这个点上模拟一次点击，就像用户用鼠标点击一样。
html在点击div打开另一个div,单击一个div时JS正在打开另一个div
weixin_35679269的博客
06-19 337
0You can make use of.target pseudo-class. For this define next CSS rules:您可以使用.target伪类。为此定义下一个CSS规则:HTML: Show ShoesThese are the shoesCSS:#shoes {display: none; /* hide by default */}#shoes:target,...
点击按钮显示div内容，再点击按钮显示另一个div内容，用JS怎么写
Havanao的博客
07-19 1568
只能显示，不能隐藏 <button @click='onclick'></button> <div> <mycomponent v-if='showcom'></mycomponent> </div> { data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } }
js,li形式的选项卡，点击显示不同的div
sunling的专栏
11-18 7768
练习了一上午，一直在获取元素上出错误，最终还是弄好了     Home   -->      *{     margin:0;     padding: 0;   }   #box{     width: 410px;     display: block;   }   ul{     list-style: none;     float:
如何设计点击点击一个div，其他div做出对应反应，以及获取一个节点下的子节点...
weixin_30727835的博客
04-24 227
<div id="show"> <div>1</div> <div>2</div> <div>3</div> </div> <div id="click"> <div>click1</div> <div>...
鼠标滑过div出现另一个div并且点击会固定
weixin_45646663的博客
05-08 706
【代码】鼠标滑过div出现另一个div并且点击会固定。
鼠标点击一个div,另一个div变色.html
04-02
jquery/js实现鼠标点击一个div,另一个div变色demo
JS实现点击复选框变更DIV显示状态的示例代码
10-18
根据提供的文件内容，下面将详细解释使用JavaScript实现点击复选框变更DIV显示状态的示例代码中涉及的知识点。 首先，我们来梳理一下页面上的结构。页面上包含了一个复选框和多个表单项，其中复选框被用于控制DIV块...
JS动态添加的div点击跳转到另一页面实现代码
01-19
div调用函数跳转： var obj = document.getElementById('id'); obj.onclick=function(){ [removed].href=跳转的地址 rel=external nofollow ; } 源文件： <!DOCTYPE html> <html> <head> <...
将两个div左右并列显示并实现点击标题切换内容
12-09
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN” xml:lang=”zh-CN”> <head> <title>选项卡</title> <style type=”text/css”> <!– * { margin:0; padding:0; font-size:12px; font-weight:nor
Jquery 点击一次，显示下一个DIV 怎么做到？
骑着蜗牛り闯世界
07-28 1711
111 222 333 ++ -- $(document).ready(function(){  var n=0; var mar=$("div").length; $(".btn1").click(function(){ if(n>=(mar-1)){ alert("已经是最后一个了"); return false; } n++; $("div").hid
html点击出现另一个div,css当点击一个div元素时，另外一个div元素也改变样式
weixin_30737431的博客
06-29 3321
css当点击一个div元素时，另外一个div元素也改变样式我们通常会遇到这样的情况，当鼠标在a元素时b元素的样式也改变。当然用JS实现很简单，那么纯CSS实现呢？其实也是相当简单，代码如下。一，影响其他元素.a{width:100px;height:100px;background:#ccc;}.b{width:100px;height:100px;background:#fff;}.a:hove...
js点击某个元素控制div显示，点击除div区域外任意处div隐藏
热门推荐
fxy2016的博客
10-12 1万+
js点击元素a（或其他元素）控制div、 input显示，点击div区域外任意处div隐藏 Document *{margin: 0;padding: 0} a{ display: inline-block; width: 50px;height: 50px;background: #f40;margin: 50px 0 0 50px;} div{margin: 60p
JS实现的简单的div切换显示
TuFu_ooo的博客
10-16 4751
JS实现的简单的div切换显示
JavaScript点击事件-一个按钮触发另一个按钮
weixin_30512089的博客
03-20 2194
<input type="button" value="Click" id="C" onclick="Go();"><input type="button" value="Wait" id="W" onclick="javascript:alert('Amazing!');"><script>var C=document.getElementById("C");...
JavaScript高级编程II
mydeman的学习日志
08-23 5968
     原文地址： http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1        在前面的文章中，我们介绍了两类JavaScript小工具及其源码：浮动文本和弹出菜单。本文中，我们将继续介绍另外几个有用的JavaScript小工具，并着重说明其工作原理，因此你可以简单修改后应用到自己
点击按钮切换div及其内容（两种方法：Vue指令方式、原生DOM操作方式）(1)
2401_84097964的博客
04-11 369
v-show 控制 div 的显示与隐藏，并将 v-show 后面的判断条件与数组下标 index 绑定，也就是使得下标为某个值时某个对应的 div 就显示，比如在此程序中 index 为1时，number == 1，则代表第二个 div 显示；class 动态绑定样式，为按钮设置两个类名两种样式 .btn 和 .btn1，用于选中和未选中的区分，点击后 number 值等于下标值时该按钮高亮显示；完整代码如下：4个按钮4个div。
html点击一个div触发另一个div显示的代码
06-03
你可以使用JavaScript来实现点击一个div触发另一个div显示的效果。以下是一个示例代码： HTML代码： ```html <div id="div1" onclick="showDiv()">点击我显示另一个div</div> <div id="div2" style="display:none;">这是另一个div</div> ``` JavaScript代码： ```javascript function showDiv() { var div2 = document.getElementById("div2"); if (div2.style.display === "none") { div2.style.display = "block"; } else { div2.style.display = "none"; } } ``` 在上面的代码中，我们首先定义了两个div元素，一个是id为div1的div，另一个是id为div2的div。div2的初始状态为隐藏。当点击div1时，调用showDiv()函数。在showDiv()函数中，我们首先获取id为div2的div元素，然后检查它的display属性。如果它是"none"，我们将其设置为"block"，这将使其显示出来。如果它已经是"block"，我们将其设置为"none"，这将使其隐藏。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值