Twitter Bootstrap 选项卡导航 - 链接失败

Question

Rails 4，Ruby 2.0

我们在右侧有一个标签导航菜单，但是当您单击任何容器并加载内容时，指向主页（套件夹克）的顶部链接停止工作。

复制：

单击任何容器中的任何“更多”链接。 内容加载到窗口中。 到主页“Kit Jacket”的顶级链接将不起作用。 单击右侧导航窗口中的任何其他导航链接。 内容加载到窗口中。 “Kit Jacket”的顶级链接如何工作。

Bio 部分也会发生相同的行为，该部分不在选项卡式窗格中。

我们使用引导选项卡标记方法而不使用额外的 JavaScript (data-toggle="tab")

页面：http://www.entreuse.com/demos

Git 仓库：https://github.com/jaysonperry/entreuseApp/blob/master/app/views/kit/deanorion.html.erb

  <div class="kit-content-list">
            <h4>In this Kit</h4>
            <ul class="nav nav-stacked" id="kitContentList">
              <li class="active">
                <!-- <a href="#jacket" data-toggle="tab">Kit Jacket</a> -->
                <%= link_to "Kit Jacket", '#jacket', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#pressRelease01" data-toggle="tab">Press Release</a> -->
                <%= link_to "Press Release", '#pressRelease01', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#bookSummary" data-toggle="tab">Book Summary</a> -->
                <%= link_to 'Book Summary', '#bookSummary', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#bookOneSheet" data-toggle="tab">Book One-Sheet</a> -->
                <%= link_to 'Book One-Sheet', '#bookOneSheet', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#blogReviews" data-toggle="tab">Bloggers Reviews</a> -->
                <%= link_to 'Bloggers Reviews', '#blogReviews', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#amazonReviews" data-toggle="tab">Amazon Reviews</a> -->
                <%= link_to 'Amazon Reviews', '#amazonReviews', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#interviewQAs" data-toggle="tab">Interview Q & A's</a> -->
                <%= link_to 'Interview Q & A\'s', '#interviewQAs', :data => {:toggle=>"tab"} %>
              </li>
              <li>
                <!-- <a href="#bioAuthor" data-toggle="tab">Dean Orion Biography</a> -->
                <%= link_to 'Dean Orion Biography', '#bioAuthor', :data => {:toggle=>"tab"} %>
              </li>
            </ul>
          </div>

Answer 1

当您单击右侧的链接时，Bootstrap 会将类 .active 设置为该链接的父级 <li>。除了提供样式挂钩之外，如果您再次单击该链接，这可以防止 Bootstrap 触发淡出/淡入动画。

问题在于 - 因为您在该组选项卡之外触发选项卡，所以 Bootstrap 不会删除 .active 类。请参阅下图了解我在说什么。

删除该课程，您的“Kit Jacket”链接将再次起作用。有两种主要方法我可以建议处理删除。

1. 向您的“更多...”链接添加一个侦听器，以删除活动类。这可能有点棘手，实际上与 Bootstrap 通过 data-toggle 属性添加的监听器冲突。

2. 根本不要在“更多...”链接上使用data-toggle 属性。相反，创建一个侦听器来触发您的“新闻稿”链接的点击操作。在“更多...”和“新闻稿”链接中添加一个 ID，然后执行以下操作：

   $('#morelink').on('click', function(e) {
     e.preventDefault();
     $('#pressrelease').click();
   }