Question

我有一个简单的两个标签布局。第一个选项卡显示详细信息，而第二个选项卡显示搜索框和搜索结果。当用户导航到页面时，我希望显示第一个选项卡，但是当执行搜索时（从第二个选项卡），我希望显示页面显示第二个选项卡。

我试过了代码：

<ul class="nav nav-tabs">
  <li class="<%= 'active' if !params[:search] %>">
    <a href="#details" data-target="#details" data-toggle="tab">Details</a>
  </li>
  <li class="<%= 'active' if params[:search] %>">
    <a href="#search" data-target="#search" data-toggle="tab">Search</a>
  </li>
</ul>

上面的代码显示正确的选项卡，但不显示相应的div，因此如果执行搜索，则搜索＆＃34;搜索＆＃34;选项卡处于活动状态但是＆＃34;详细信息＆＃34; div显示。

Answer 1

好的，我没有意识到我必须为＆＃34; li＆＃34;设置活动课程。项目和相应的＆＃34; div＆＃34;项目。现在工作。 https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

<div class="tab-content">
  <div class="tab-pane <%= 'active' if !params[:search] %> fade in" id="details">
    ...
  </div>

  <div class="tab-pane <%= 'active' if params[:search] %>" id="search">
    ...
  </div>
</div>

显示搜索结果的Bootstrap选项卡

1 个答案: