Рельсы петли на два дел

Question

У меня проблема с циклом на вкладке Bootstrap.

%ul.nav.nav-pills.nav-fill{role: "tablist"}
  - @matrices.each_with_index do |matrice, i|
    %li.nav-item
      = link_to "#matrice_#{matrice.id}", class:"nav-link #{"active show" if i.zero?}", "data-toggle" => "tab" do
         = matrice.name
.tab-content
  - @matrices.each_with_index do |matrice, i|
    %div{id:"matrice_#{matrice.id}", class:"tab-pane #{"active show" if i.zero?}", role: "tabpanel"}
      = matrice.name

Первая вкладка хорошо отображается с содержимым, но когда я нажимаю на вторую вкладку, также отображается содержимое первой вкладки.Я хочу скрыть содержимое предыдущей вкладки при нажатии.

Как это исправить?Могу ли я сделать один цикл над двумя HTML-дивами?

Answer 1

Хамл строго следует абзацу.Кажется, что цикл во второй вкладке находится под той же строкой, где находится первая вкладка.

Попробуйте следующий способ.

%ul.nav.nav-tabs
  %li.active
    %a{"data-toggle": "tab", href: "#tab_menu1"}
      Graphical View
  %li
    %a{"data-toggle": "tab", href: "#tab_menu2"}
      Tabular View

%div.tab-content
  %div.tab-pane.in.active{id: "tab_menu1"}
    = render partial: "menu1_view"
  %div.tab-pane{id: "tab_menu2"}
    = render partial: "menu2_view"

Вы можете обратиться https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp для получения более подробной информации.

Добавьте ваши циклы под тегом% div.tab-page.

Надеюсь, это поможет !!