Question

我正在尝试设置一个包含3个可点击标题的水平栏。在点击它们之前它们是一种颜色但是在选择时我试图让那部分改变颜色并在条形图下面显示一个特定的段落。

这是我目前所拥有的一个小问题..

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

Answer 2

为此，您需要使用JavaScript。你需要创建一个函数＆＃34;告诉＆＃34;单击h5时，页面将执行该功能的html。

这里是html：

<h5 style="padding:3% 3% 3% 0px; display:inline-block;" onClick="myFunction(this.id, idParagraph)">Section<br>One</h5>

这是JavaScript函数：

function sectionClick(idSection, idParagraph){
 document.getElementById(idSection).css.backgroundColor = "blue";

    document.getElementById(idParagraph).css.display = "block";
}

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

2 个答案: