Question

Rails 4，Ruby 2.0

我们右侧有一个标签导航菜单，但当您点击任意容器并加载内容时，主页面的顶部链接（Kit Jacket）将停止工作。

重现：

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

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

我们使用引导标签标记方法而不使用其他JavaScript（data-toggle =“tab”）

Page：http://www.entreuse.com/demos

Git repo：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类。请参阅下面的图片，了解我在说什么。

image of code

删除此课程以及您的＆＃34; Kit Jacket＆＃34;链接将再次工作。我可以建议两种主要方法来处理删除。

为您的＆＃34;更多...＆＃34;添加一个监听器删除活动类的链接。这可能有点棘手，实际上与侦听器Bootstrap的冲突是通过data-toggle属性添加。
不要在＆＃34;更多...＆＃34;上使用data-toggle属性完全没有联系。相反，创建一个侦听器，触发您的＆＃34;新闻稿＆＃34;链接。为您的＆＃34;更多...＆＃34;添加ID和＆＃34;新闻稿＆＃34;链接，然后执行以下操作：
```
$('#morelink').on('click', function(e) {
  e.preventDefault();
  $('#pressrelease').click();
}
```

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

1 个答案: