Question

我目前在我的个人网站上工作，现在我正在尝试创建可以显示有关同一主题的不同文本的按钮。我想更精确一点，这里有两张图片：

Button Text 1

Button Text 2

所以当按钮＆＃34;信息＆＃34;处于活动状态，显示的文本是关于我必须描述项目的所有信息，以及何时＆＃34;信用＆＃34;处于活动状态，显示的文本更具技术性（列表）。两个文本都需要显示在同一个地方。

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

如果您需要更多信息给我正确的答案，请告诉我！

提前谢谢

Answer 1

您可以使用Bootstrap标签：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

为什么不尝试bootstraps可折叠可折叠

Lorem ipsum dolor text ....

允许不同内容的按钮

3 个答案: