Rails引导导航选项卡在通过yield渲染时处于活动状态 [英] Rails bootstrap nav tabs active while rendering via yield

问题描述

我一直坚持使导航选项卡起作用，以跟踪活动内容以及如何呈现新视图.

I'm stuck on making nav tabs work with keeping track of what's active and how to still render a new view.

这是我的标记示例.仅出于说明目的包括一个选项卡内容.

Here's an example of my markup. Only included one tab-content for illustrative purposes.

<div class="col-xs-12">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><%= link_to "Your Events", '#your-events', data: {toggle: "tab"} %></li>
    <li role="presentation" class=""><%= link_to "Join Events", '#join-events', data: {toggle: "tab"}  %></li>
    <li role="presentation" class=""><%= link_to "Create Event", '#create-event', data: {toggle: "tab"} %></li> 

</div>

<div class="tab-content">
  <div class="tab-pane active" id="your-events">
    <ul class="nav nav-pills">
      <li role="presentation" class="active" id="upcoming"><%= link_to "Upcoming Events", upcoming_events_path %></li>
      <li role="presentation" id="past"><%= link_to "Past Events", past_events_path  %></li>
    </ul>

  <%= yield :section %>

  </div> 

现在，我可以四处浏览以显示我的标签内容.但是当我点击其他东西时.例如在即将发生的事件"并单击过去的事件"中处于活动状态，如何在从past_events_path加载内容的同时使用javascript和同一空间上的链接将active转换为#past

So right now I can tab around to expose my tab-content. But when I click on something else. e.g. active in "Upcoming events' and clicking "Past events", how do use both javascript and a link on the same space to shift the active to #past while loading the content from past_events_path

推荐答案

可以回答这个问题，但有点怪异，因为我的标签内容被嵌套了

Was able to answer with this but a bit hacky cause my tab content is nested

如何显示Twitter-Bootstrap导航活动链接?

这篇关于Rails引导导航选项卡在通过yield渲染时处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！