如何隐藏/显示div或仅用css切换？

Question

我尝试了所有问题＆amp;与此主题相关的答案。此外，我尝试了相关的问题，并尝试解决它，但没有成功。所以请死译我的问题。

首先看看我做的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想：

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

  

＆LT; a href =＆＃34;＃showdiv1＆＃34;类=＆＃34;答题＆＃34; tabindex =＆＃34; 1＆＃34;＆gt;点击我1

以

  

＆LT; div id =＆＃34;＃showdiv1＆＃34;类=＆＃34;答题＆＃34; tabindex =＆＃34; 1＆＃34;＆gt;点击我1

原因：我为什么要这样做？

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



当我尝试将切换代码粘贴到我的弹出代码中时，会发生以下情况：



看！点击后弹出窗口消失了。这就是为什么我需要用div删除锚标签或找到其他方法来做到这一点。

弹出式代码：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如果有人知道怎么做，那就太好了。 在此先感谢。

注意： 只有纯CSS，CSS3在答案中使用不使用（javascript，jquery）＆amp;控制中的任何其他

Answer 1

添加悬停状态，以便在单击内部时保持弹出窗口打开：

.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>