検索結果を表示するブートストラップタブ

Question

私は単純な2つのタブレイアウトを持っています。最初のタブには詳細が表示され、2番目のタブには検索ボックスと検索結果が表示されます。ユーザーがページに移動したときに、最初のタブを表示したいとき（2番目のタブから）検索が実行されたときに、2番目のタブが表示されているページが表示されます。

私はコードしようとした

：

<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要素を表示し、「詳細」のdivが表示されますがアクティブであります。

Answer 1

OK、私は "li"項目と対応する "div"項目の両方に対してアクティブなクラスを設定しなければならないことを認識しませんでした。今すぐ動作します。 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>