按钮，允许不同的内容

Question

我目前正在我的个人网站上工作，现在我正在尝试创建按钮，以允许我显示关于同一主题的不同文本。我为了更加精确，这里有两个图像：

Button Text 1

Button Text 2

所以当按钮“信息”是活动的，显示的文本是所有的，我要描述的信息项目，当“积分”处于活动状态时，显示的文字更具技术性（列表）。这两个文本都需要显示在同一个地方。

我目前使用boostrap在我自己的devlopping我的网站，我不知道在哪里寻找解决方案（HTML/CSS）或脚本（Javascript）。

请让我知道，如果你需要更多的信息给我正确的答案！

预先感谢您

Answer 1

您可以使用引导标签：http://getbootstrap.com/javascript/#tabs

如果你愿意，你也可以使用jQuery：https://jqueryui.com/tabs/

Answer 2

既然你说你正在使用bootstrap，你可以使用tab组件，代码示例如下：

<div> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#image1" aria-controls="image1" role="tab" data-toggle="tab">Image 1</a></li> 
    <li role="presentation"><a href="#image2" aria-controls="image2" role="tab" data-toggle="tab">Image 2</a></li> 

    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="image1"> 
     <h1>Image 1!</h1> 
    </div> 
    <div role="tabpanel" class="tab-pane" id="image2"> 
     <h2>Image 2!</h2> 
    </div> 

    </div> 

</div> 

你会当然用你自己的内容替换这两个标签的内容:)。我在这里放置了两个标题（h1）作为示例。

注意;我假设你正在使用bootstrap版本3. *。

Answer 3

为什么不尝试白手起家可折叠 可折叠

Lorem存有悲文本....