开发者社区> 问答> 正文

单击div时如何显示另一个div?

我知道,这个问题在这里被问过很多次了,但是所有得到的答案在解决我的问题上并不是特别有效。

我有一个名为.title3的div ,当我单击它时,我希望显示另一个名为.Content3的 div 。但是不幸的是,它并没有如我所愿

这是我发现此问题的html代码的一部分:

X

Write your feedback here
FEEDBACK
CSS:

/* The Form Style */

form { width: 100%; height: 100%; }

form input { width: 100%; height: 35px; color: #8b8b8b; font-family: 'Lato', sans-serif; background-color: #171717; padding: 12px; border: 0; outline: none; border-top: 0.15px solid #262323; border-left: 0.15px solid #262323; border-right: 0.15px solid #262323; }

form textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 200px; color: #8b8b8b; font-family: 'Lato', sans-serif; background-color: #171717; padding: 12px; border: 0; outline: none; border-top: 0.15px solid #262323; border-left: 0.15px solid #262323; border-right: 0.15px solid #262323; }

form button { width: 100%; height: 45px; position: relative; top: -3px; color: #8b8b8b; font-family: 'Lato', sans-serif; background-color: #171717; border: 0.15px solid #262323; outline: none; font-size: 20px; } input:focus, textarea:focus, button:focus{ background-color: #212020; border-top: 0.15px solid #1f1616; border-left: 0.15px solid #1f1616; border-right: 0.15px solid #1f1616; }

/* Content3 style */

.Content3 { width: 300px; height: 350px; position: absolute; z-index: 2; display:none; }

/* one3 style */

.one3 { width: 300px; height: 350px; transition: 0.3s ease; position: relative; background-color: #141414; }

/* pseudo3 style */

.pseudo3 { width: 320px; padding: 10px; border-top: 2px solid #b95e1c; border-bottom: 2px solid #ad7145; background-image: linear-gradient(#b95e1c, #ad7145), linear-gradient(#b95e1c, #ad7145); background-size: 2px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; }

/* close style */

.close{ color: #8b8b8b; font-size: 24px; position:absolute; left:-11px; top:-62px; z-index:3; border-top: 0.5px solid #1f1616; border-left: 0.5px solid #1f1616; border-right: 0.5px solid #1f1616; border-bottom: 0.5px solid #1f1616; padding:10px 17px; background-color:#212121; transition: 0.2s ease-in-out; } .close:hover{ background-color: #8b8b8b; color:#212121; cursor:pointer; transition: 0.2s ease-in-out; } JavaScript的:

function showDiv() { var x = document.getElementsByClassName("title3"); if ( x.click === true ){ document.getElementsByClassName("Content3").style.display = "block"; } } 没有错误消息..这很奇怪..但是当我单击我的.title3 div时,没有显示我希望的div .Content3 ..

展开
收起
被纵养的懒猫 2019-09-24 20:17:46 582 0
0 条回答
写回答
取消 提交回答
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载