我如何隐藏/显示div或仅用CSS切换？ [英] How can I hide/show div or Toggle only with css?

查看：139
本文介绍了我如何隐藏/显示div或仅用CSS切换？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试了所有的问题和解答。答案与此主题相关。此外，我尝试了相关的问题，并试图解决它，但没有成功。所以，请致命地阅读我的问题。



首先查看我所做的代码：



.clicker {display：inline-block;宽度：100px; height：50px;背景颜色：蓝色;颜色：#FFF;}。clicker.hidden {display：none;}。hiddendiv {height：0px;背景颜色：绿色;溢出：隐藏; transition：height 0.5s;}。hiddendiv.nr2 {background-color：red;}＃showdiv1：target〜div a [href =＃showdiv1]，＃showdiv2：target〜div a [href =＃showdiv2] {display：none;}＃showdiv1：target〜div a [href =＃hidediv1]，＃showdiv2：target〜div a [href =＃hidediv2] {display：inline-block;}＃showdiv1：target〜 div .hiddendiv.nr1，＃showdiv2：target〜div .hiddendiv.nr2 {height：150px;} 

 < div id =showdiv1>< / div>< div id =showdiv2>< / div>< div> < a href =＃showdiv1class =clickertabindex =1>点击我1< / a> < a href =＃hidediv1class =clicker hiddentabindex =1>点击我1< / a> < a href =＃showdiv2class =clickertabindex =2>点击我2< / a> < a href =＃hidediv2class =clicker hiddentabindex =2>点击我2< / a> < div class =hiddendiv nr1>< / div> < div class =hiddendiv nr2>< / div>< / div>

我想：


  1. 用div替换所有的锚标记。 示例：




<点击我1


to：


< div id =＃showdiv1class =clickertabindex =1> Click me 1


我试图做到这一点？



我正在制作一个像下面给出的图像的弹出窗口，为此，我需要一种方法，如果我点击社交，然后出现社交div （隐藏手动div），如果我点击手动，则会出现手动div 。 （隐藏社交div）





请参阅！点击时弹出消失。这就是为什么我需要使用div去除锚定标记或找到任何其他方式来做到这一点。



弹出式代码：



.modalDialog {position：fixed; font-family：Arial，Helvetica，sans-serif; top ：0; right：0; bottom：0; left：0; background：rgba（0,0,0,0.8）; z-index：99999; opacity：0; -webkit-transition：opacity 400ms ease-in; - moz-transition：不透明度400ms缓和; -transition：不透明度400ms缓和; pointer-events：none;}。modalDialog：target {opacity：1; pointer-events：auto;}。modalDialog> #__fookyPopup {width：400px; position：relative; margin：10％auto; padding：5px 20px 13px 20px; border-radius：10px; background：#fff; background：-moz-linear-gradient（#fff，＃999） ; background：-webkit-linear-gradient（#fff，#fff）; background：-o-linear-gradient（#fff，＃999）;}。profile_container {height：160px; width：400px;背景：#CCC;显示：内联块; } {.profile_div高度：120像素;宽度：130px;边距：20像素;保证金左：130px;背景：#ddd; border：1px solid gray;}。head_div {min-height：12px; width：100％; } {.media_layer的margin-top：20px的; MI-高度：12px的;宽度：400像素;背景：＃;显示：内联块; } {.manual高度：50像素;宽度：197px;浮动：右;背景：＃;显示：内联块; } .manual：hover {border-bottom：2px solid＃ab0a72; }。社会{高度：50像素;宽度：197px;背景：＃;显示：内联块; } .social：hover {border-bottom：2px solid＃ab0a72; } .clicker {display：inline-block;宽度：100px; height：50px;背景颜色：蓝色;颜色：#FFF;}。clicker.hidden {display：none;}。hiddendiv {height：0px;背景颜色：绿色;溢出：隐藏; transition：height 0.5s;}。hiddendiv.nr2 {background-color：red;}＃showdiv1：target〜div a [href =＃showdiv1]，＃showdiv2：target〜div a [href =＃showdiv2] {display：none;}＃showdiv1：target〜div a [href =＃hidediv1]，＃showdiv2：target〜div a [href =＃hidediv2] {display：inline-block;}＃showdiv1：target〜 div .hiddendiv.nr1，＃showdiv2：target〜div .hiddendiv.nr2 {height：150px;} 

 < a href =#__ spooky_auth_popup>打开模式< / a>< div id =__ spooky_auth_popupclass =modalDialog>< div id =__ spookyPopup >< a href =＃closetitle =Closeclass =close> X< / a> < div class =profile_container> < div class =profile_div>< / div> < / div>< div class =head_div> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃8d8686;>< I>请登录访问您的私人内容。 / I>< / p>< / DIV> < div class =media_layer> < div class =social> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃000; line-height：50px;> SOCIAL< / p> < / DIV> < div class =manual> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃000; line-height：50px;> MANUAL< / p> < / DIV> < / DIV> < div id =showdiv1>< / div>< div id =showdiv2>< / div>< div> < a href =＃showdiv1class =clickertabindex =1>点击我1< / a> < a href =＃hidediv1class =clicker hiddentabindex =1>点击我1< / a> < a href =＃showdiv2class =clickertabindex =2>点击我2< / a> < a href =＃hidediv2class =clicker hiddentabindex =2>点击我2< / a> < div class =hiddendiv nr1>< / div> < div class =hiddendiv nr2>< / div>


如果有人有一个想法如何做到这一点会很好。
在此先感谢。



注意： 纯CSS，CSS3在答案中不使用（javascript，jquery） &安培;任何其他控制

解决方案

添加悬停状态， p> 

  .modalDialog {position：fixed; font-family：Arial，Helvetica，sans-serif; top：0;正确：0;底部：0;左：0;背景：rgba（0，0，0，0.8）; z-index：99999;不透明度：0; -webkit-transition：不透明度400ms缓和; -moz-transition：不透明度400ms缓和;过渡：不透明400ms缓和; pointer-events：none;}。modalDialog：target，.modalDialog：hover {opacity：1; pointer-events：auto;} .modalDialog> #__ spookyPopup {width：400px;位置：相对;保证金：10％汽车; padding：5px 20px 13px 20px; border-radius：10px;背景：#fff;背景：-moz-linear-gradient（#fff，＃999）;背景：-webkit-linear-gradient（#fff，#fff）;背景：-o-linear-gradient（#fff，＃999）;}。profile_container {height：160px;宽度：400px;背景：#ccc; display：inline-block;}。profile_div {height：120px;宽度：130px; margin-top：20px; margin-left：130px;背景：#ddd; border：1px solid gray;}。head_div {min-height：12px; width：100％;}。media_layer {margin-top：20px; min-height：12px;宽度：400px;背景： ＃; display：inline-block;}。manual {height：50px;宽度：197px; float：right;背景： ＃; display：inline-block;}。manual：hover {border-bottom：2px solid＃ab0a72;}。social {height：50px;宽度：197px;背景： ＃; display：inline-block;}。social：hover {border-bottom：2px solid＃ab0a72;}。social_link_container {height：160px;宽度：400px;背景：#ccc; display：inline-block;}。fb_container {height：50px;宽度：340px; margin-top：20px; margin-left：30px;背景：#ddd; border：1px solid gray;}。clicker {display：inline-block;宽度：100px; height：50px;背景颜色：蓝色;颜色：#FFF;}。clicker.hidden {display：none;}。hiddendiv {height：0px;背景颜色：绿色;溢出：隐藏; transition：height 0.5s;}。hiddendiv.nr2 {background-color：red;}＃showdiv1：target〜div a [href =＃showdiv1]，＃showdiv2：target〜div a [href =＃showdiv2] {display：none;}＃showdiv1：target〜div a [href =＃hidediv1]，＃showdiv2：target〜div a [href =＃hidediv2] {display：inline-block;}。hiddendiv.nr1 { height：150px;}＃showdiv1：target〜div .hiddendiv.nr1，＃showdiv2：target〜div .hiddendiv.nr2 {height：150px;}＃showdiv2：target〜div .hiddendiv.nr1 {height：0px;}

< a href =#__ spooky_auth_popup> Open Modal< / a>< div id =__ spooky_auth_popupclass =modalDialog> < div id =__ spookyPopup> < a href =＃closetitle =Closeclass =close> X< / a> < div class =profile_container> < div class =profile_div>< / div> < / DIV> < div class =head_div> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃8d8686;> < I>请您登入以存取您的私人内容。< / I> < / p为H. < / DIV> < div class =media_layer> < div class =social> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃000; line-height：50px;> SOCIAL< / p> < / DIV> < div class =manual> < p style =margin：0; padding：0; text-align：center; font-size：25px; color：＃000; line-height：50px;> MANUAL< / p> < / DIV> < / DIV> < div id =showdiv1>< / div> < div id =showdiv2>< / div> < DIV> < a href =＃showdiv1class =clickertabindex =1>点击我1< / a> < a href =＃hidediv1class =clicker hiddentabindex =1>点击我1< / a> < a href =＃showdiv2class =clickertabindex =2>点击我2< / a> < a href =＃hidediv2class =clicker hiddentabindex =2>点击我2< / a> < div class =hiddendiv nr1>< / div> < div class =hiddendiv nr2>< / div> < / div>


I tried all questions & answers related this topic. Additionally and I tried related questions and try to solve it but not success. So please read my question deathly.

Firstly have a look at the code what I made:

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 150px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

I want to:

  1. Replace all the anchor tag with div only. example:

< a href="#showdiv1" class="clicker" tabindex="1">Click me 1

to:

< div id="#showdiv1" class="clicker" tabindex="1">Click me 1

Reason: why I trying to do this?

I am making a popup like an image given below and for that, I need a way that if I click on SOCIAL then social div appears(hide the manual div) and If I click on MANUAL then manual div appears. (hide the social div)

And when I try to paste the toggle code inside my popup code this is what happens:

see! the popup disappears when I click. that's why I need to remove the anchor tag with div or find any other way to do it.

Popup code:

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
-transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > #__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}



.profile_container
{				
height:160px;
width:400px;			
background:#ccc;	
display:inline-block;				
}
.profile_div
{
height:120px;
width:130px;	
margin-top:20px;
margin-left:130px;				
background:#ddd;	
border:1px solid grey;
}
.head_div
{
min-height:12px;
width:100%;														
}
				
.media_layer
{
margin-top:20px;
mi-height:12px;
width:400px;			
background:#;	
display:inline-block;				
}
				
				
.manual
{
height:50px;
width:197px;
float:right;				
background:#;
display:inline-block;							
}
.manual:hover
{
border-bottom:2px solid #ab0a72;	
}
.social
{	
height:50px;
width:197px;							
background:#;				
display:inline-block;
				
}
.social:hover
{
border-bottom:2px solid #ab0a72;	
}
				
		
				
		




.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
<a href="#close" title="Close" class="close">X</a>
	<div class="profile_container">
				
		<div class="profile_div"></div>
			</div>
<div class="head_div">
		<p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;"><I>Hey, please login to access your private content.</I></p>
</div>
					
<div class="media_layer">
					
	 <div class="social" >
			<p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
	 </div>
							 
<div class="manual">
	 <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
	</div>
							
							
</div>
			
	<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>

If anyone have an idea how to do it it would be great. Thanks in Advance.

Note: Only pure CSS,CSS3 Use in Answer not use (javascript,jquery) & any other from control

解决方案

Add the hover state so you keep the popup open when you click inside:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>#__spookyPopup {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #fff);
  background: -o-linear-gradient(#fff, #999);
}

.profile_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.profile_div {
  height: 120px;
  width: 130px;
  margin-top: 20px;
  margin-left: 130px;
  background: #ddd;
  border: 1px solid grey;
}

.head_div {
  min-height: 12px;
  width: 100%;
}

.media_layer {
  margin-top: 20px;
  min-height: 12px;
  width: 400px;
  background: #;
  display: inline-block;
}

.manual {
  height: 50px;
  width: 197px;
  float: right;
  background: #;
  display: inline-block;
}

.manual:hover {
  border-bottom: 2px solid #ab0a72;
}

.social {
  height: 50px;
  width: 197px;
  background: #;
  display: inline-block;
}

.social:hover {
  border-bottom: 2px solid #ab0a72;
}

.social_link_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.fb_container {
  height: 50px;
  width: 340px;
  margin-top: 20px;
  margin-left: 30px;
  background: #ddd;
  border: 1px solid grey;
}

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color: #FFF;
}

.clicker.hidden {
  display: none;
}

.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}

.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
  display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
  display: inline-block;
}

.hiddendiv.nr1 {
 height:150px;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
  height: 150px;
}
#showdiv2:target~div .hiddendiv.nr1 {
  height:0px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
  <div id="__spookyPopup">
    <a href="#close" title="Close" class="close">X</a>



    <div class="profile_container">

      <div class="profile_div"></div>
    </div>
    <div class="head_div">
      <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;">
        <I>Hey, please login to access your private content.</I>
      </p>
    </div>


    <div class="media_layer">

      <div class="social">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
      </div>


      <div class="manual">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
      </div>


    </div>

    <div id="showdiv1"></div>
    <div id="showdiv2"></div>

    <div>
      <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
      <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

      <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
      <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

      <div class="hiddendiv nr1"></div>
      <div class="hiddendiv nr2"></div>
      </div>

这篇关于我如何隐藏/显示div或仅用CSS切换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆