Question

为什么标签在导轨中无法正常工作？ Bootstrap的JavaScript文件没有正确加载或我做错了吗？我有一个选项卡面板，基本上有两个内容。一个用于提问，另一个用于博客文章。每当我刷新页面时，博客文章的内部HTML都会与问题面板混合在一起，好像Bootstap的脚本从未真正加载过＃。

为了举例说明我的问题，这是我刷新页面时的图像：

这是我点击其中一个标签时的图片。（脚本加载，并按照我想要的方式分隔内容。）

问题标签：

博客文章标签：

Application.js代码：

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

面板代码：

      <div class="well">
        <ul class="nav nav-tabs">
          <li role="presentation"><a class="none white" href="#questions" aria-controls="questions" role="tab" data-toggle="tab">Questions</a></li>
          <li role="presentation"><a class="none white" href="#posts" aria-controls="posts" role="tab" data-toggle="tab">Blog posts</a></li>
        </ul>   

          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="questions">
            <br>
                <% @user.questions.each do |question| %>
                    <%= link_to question.title, question_path(question), :class => "ques" %>
                    <p class="pull-right">
                        <%= question.user.username %>
                    </p>
                    <hr/>
                <% end %>
            </div>
            <div role="tabpanel" class="tab-pane active" id="posts">
            <br>
                <p><a href="#" class="ques">test blog post 123 123</a></p>
                <p><a href="#" class="ques">test blog post 123 123</a></p>
                <p><a href="#" class="ques">test blog post 123 123</a></p>
                <p><a href="#" class="ques">test blog post 123 123</a></p>
            </div>
          </div>
      </div>

Answer 1

显然我在两个面板上错误地添加了活动类。因此，通过删除第二类，一切都得到了修复。

Bootstrap的奇怪行为

1 个答案: