使用2个不同的按钮

Question

我有一个真正的新手问题。我想制作一个看起来像下面的img的页面。这就是我希望它工作的方式：我单击两个按钮中的一个，然后将问题/语句更改为与之前完全相同的位置中的新问题/语句，同时按钮保持不变（不会弄乱结构） 。我尝试了一些来自stackoverflow的方法，但是我无法让它工作。

感谢您的帮助！

我的代码看起来像这样。到目前为止我得到了什么：

<div class="row" id="pic">
    <div class="large-12 columns">
    <div  align="center">
      <img src="justin2.png"/>
    </div>
    </div>
  </div>
 <div class="row">
 <div class="large-12 columns">
 <div class="question1"><h1 >This is a german shepherd.</h1></div>
 <div class="question2"><h1 >This is rottweiler.</h1></div>
 <div  align="center" >
 <a href="#" id="True" class="button success" >True</a>
 <a href="#" id="False" class="button alert" >False</a></div>

Answer 1

您可以将所有问题都包含在relative位置的一个分部之间，并将您的问题位置更改为绝对位置 因为你可以对此有很好的认识，所以我在jsfiddle中编写并实现了它。

You can check the code consist of js, html and css here