html - 使标题可点击并在选中时显示特定段落

Question

我正在尝试设置一个带有 3 个可点击标题的水平条。在被点击之前，它们是一种颜色，但当被选中时，我试图让该部分改变颜色并在栏下方显示特定段落。

这是我目前拥有的一个 jfiddle..

<div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
<h5 style="padding:3% 3% 3% 0px; display:inline-block;">Section<br>One</h5>
<h5 style="padding:3% 4%; display:inline-block; border-left:10px solid; border-right:10px solid;">Section<br> Two</h5>
<h5 style="padding:3% 0px 3% 3%; display:inline-block;">Section<br> Three</h5>

http://jsfiddle.net/9g9ybepy/1/

根据我尝试在线收集的信息，我可能需要使用 clickable() 函数，但我不确定。

希望有办法做到这一点，在此先感谢。

Answer 1

你不需要 Javascript，你可以用 css :target 做到这一点

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target_tab

storytelling_tabs {
  width: 100%;
  background: #44c5e1;
  text-align: center;
}
storytelling_tabs h5 {
  color: #fff;
  font-size: 0.9em;
}
.tab .showMe {
  display: none;
}
.tab .showMe:target {
  display: block;
}

<div class="tab">
  <div class="storytelling_tabs" style="width:100%; background:#44c5e1; text-align:center;">
    <a href="#link1" tyle="padding:3% 3% 3% 0px; display:inline-block;">Section One</a>
    <a href="#link2" style="padding:3% 4%; display:inline-block; border-left:10px solid; border-right:10px solid;">Section Two</a>
    <a href="#link3" style="padding:3% 0px 3% 3%; display:inline-block;">Section  Three</a>
  </div>
  <div class="showMe" id="link1">
    <p>Patagraph1</p>
  </div>
  <div class="showMe" id="link2">
    <p>Patagraph2</p>
  </div>
  <div class="showMe" id="link3">
    <p>Patagraph3</p>
  </div>
</div>