javascript - 我想在网页上创建超链接，点击时会打开不同的 DIV

Question

我的大脑完全被这个问题炸毁了，所以我会去这里。

我的 CSS 文件中有这些“标签条目”(因为缺少更好的短语):

#wrap20 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}

#wrap21 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}

#wrap22 {
	margin: 0 auto;
   	width: 945px;
	height: 800px;
	text-align: center;
	background-color: yellow;
	padding-bottom: 0px;
	padding-top: 0px;
}​

它们看起来都很像，是的，但是 <div id>容器持有不同组的图像。

我想做的是在同一页面中创建超链接，其中一个链接将打开一个 div 容器。如果我单击另一个超链接，它将关闭前一个并打开新的，依此类推。

我已经尝试过不同的 JavaScript 代码，老实说，与尝试解释和转换我在网络上找到的示例相比，用霰弹枪对着脑袋猛击一下可能会带来更愉快的感觉(绝不是我是一名编剧，但我不想成为一名编剧。)

有什么想法吗？我需要很多手握这个。解释得越具体越好。

Answer 1

纯CSS，以及利用 anchor 标签a的target，也可以使用input type="radio"，因为给它们相同的名称只会让用户一次触发一个选项，同时使用 display:none 隐藏 radio 输入并让 label for"" 控制触发过程，像这样:

JS Fiddle 1

当然，只要这些 radio 和 div 具有相同的父级，您当然可以根据需要布置容器 div 和 radio 输入，请查看这些 JS Fiddle 2 , 和 JS Fiddle 3

完整代码:

.radios {
  display: none;
}
.divs {
  max-height: 0;
  overflow: hidden;
  background-color: orange;
}
.divs div {
  margin: 5px;
}
label.tabs {
  display: block;
  line-height: 30px;
  background-color: green;
  margin: 1px 0;
  padding-left: 20px;
  color: white;
  cursor: pointer;
}
#tab-1:checked ~ #div-1 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}
#tab-2:checked ~ #div-2 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}
#tab-3:checked ~ #div-3 {
  max-height: 1000px;
  transition: all 1s ease-in-out;
}

<input type="radio" id="tab-1" name="rad" class="radios">
<label for="tab-1" class="tabs">Tab ONE</label>
<div id="div-1" class="divs">
  <div>
    Ice cream croissant caramels chupa chups marzipan cookie pudding. Tart marzipan lemon drops apple pie jelly dessert sugar plum cheesecake cake. Gingerbread topping ice cream sugar plum halvah icing.
  </div>
</div>
<input type="radio" id="tab-2" name="rad" class="radios">
<label for="tab-2" class="tabs">Tab TWO</label>
<div id="div-2" class="divs">
  <div>
    Halvah danish danish. Cookie dragée sesame snaps marzipan pastry sesame snaps chocolate cake danish cotton candy. Ice cream pie cake cake cheesecake muffin sesame snaps. Sesame snaps gingerbread ice cream tiramisu sesame snaps caramels tootsie roll.
  </div>
</div>
<input type="radio" id="tab-3" name="rad" class="radios">
<label for="tab-3" class="tabs">Tab THREE</label>
<div id="div-3" class="divs">
  <div>
    Toffee macaroon pudding ice cream cookie topping. Pastry gingerbread marshmallow chupa chups icing jelly beans.
  </div>
</div>

---

更新:

使用 :target 为 a 标签实现上面相同的效果，更少的 DOM 元素，更少的 CSS 并且不需要“target”元素与 anchor :

JS Fiddle 4

还有这个JS Fiddle 5还有这个JS Fiddle 6

完整代码:

.divs {
  max-height: 0;
  overflow: hidden;
  background-color: orange;
}
.divs div{
  margin:5px;
}

a.tabs {
  display: block;
  line-height: 30px;
  background-color: green;
  margin: 1px 0;
  padding-left: 20px;
  color: white;
  text-decoration:none;
  cursor: pointer;
}
:target{
  max-height: 1000px;
  transition: all 1s ease-in-out;
}

<a href="#div-1" class="tabs">Tab ONE</a>
<a href="#div-2" class="tabs">Tab TWO</a>
<a href="#div-3" class="tabs">Tab THREE</a>
<div id="div-1" class="divs">
  <div>
    Ice cream croissant caramels chupa chups marzipan cookie pudding. Tart marzipan lemon drops apple pie jelly dessert sugar plum cheesecake cake. Gingerbread topping ice cream sugar plum halvah icing. Sesame snaps cotton candy dragée halvah candy canes
    gummies bonbon macaroon tootsie roll. Muffin tootsie roll wafer. Candy candy canes sweet jelly chocolate bar sweet roll brownie. Chocolate bar dragée topping brownie.
    <br> Candy oat cake wafer candy cookie apple pie. Chocolate liquorice gummi bears tiramisu topping pastry topping dessert jelly beans. Halvah cookie lemon drops oat cake oat cake gingerbread. Pudding sesame snaps croissant powder wafer pudding wafer.
    Tootsie roll soufflé fruitcake macaroon chocolate bar marzipan jujubes. Toffee lollipop muffin brownie jelly beans fruitcake. Tiramisu topping donut chocolate cake fruitcake.
  </div>
</div>
<div id="div-2" class="divs">
  <div>
    Halvah danish danish. Cookie dragée sesame snaps marzipan pastry sesame snaps chocolate cake danish cotton candy. Ice cream pie cake cake cheesecake muffin sesame snaps. Sesame snaps gingerbread ice cream tiramisu sesame snaps caramels tootsie roll. Ice
    cream pastry danish ice cream. Gingerbread chocolate powder jujubes marshmallow croissant.
  </div>
</div>

<div id="div-3" class="divs">
  <div>
    Toffee macaroon pudding ice cream cookie topping. Pastry gingerbread marshmallow chupa chups icing jelly beans. Lemon drops cheesecake chocolate bar halvah soufflé. Cheesecake marzipan fruitcake donut lemon drops topping brownie. Croissant sugar plum
    gummi bears sweet roll lollipop. Gummi bears fruitcake cake candy canes lemon drops pie chupa chups lemon drops.
  </div>
</div>