php - 使用 Twitter Bootstrap 的药丸导航

Question

我正在尝试使用 Twitter Bootstrap 的药丸导航，但它无法正常工作。

我确实已将“事件”类添加到我的选项卡内容中。然而，这就是发生的一切——我实际上没有看到内容有任何变化。所有内容只是按顺序显示，而不是包装到选项卡 Pane 中。

这是 PHP。请注意，我只是在 header 中包含 bootstrap.js。

<section id="about" class="section tabbable">
    <!-- Section Title -->
    <?php echo '<h2>' . $section->post_title . '</h2>'; ?>

    <!-- Subsection Title Navigation -->
    <?php if (!empty($section_children)){ //if other sections exist, add them
            echo '<ul class="nav nav-pills" id="an">';
            echo '<li class="active">' . '<a data-toggle="pill" href="#' . $section->post_name . '-content">' . $section->post_title . '</a></li>';

            foreach($section_children as $subsection){
                echo '<li>' . '<a data-toggle="pill" href="#' . $subsection->post_name . '">' . $subsection->post_title . '</a></li>';
            }
            echo '</ul><!--"/.nav-pills"-->';   
          }?>

    <div class="contentArea tab-content">
  <?php echo '<article class="contents tab-pane active" id="' . $section->post_name . '-content">' . apply_filters('the_content', $section->post_content) . '</article><!-- /.contents -->';?>

  <?php if (!empty($section_children)){ //if other sections exist, add them
            foreach($section_children as $subsection){
                echo '<div class="contents tab-pane" id="' . $subsection->post_name . '">';
                echo '<h2>' . $subsection->post_title . '</h2>';
                echo '<article>' . apply_filters('the_content', $subsection->post_content) . '</article></div><!-- /.contents -->';
            }   
        }?>
    </div><!-- /.contentArea -->
</section><!-- /.section -->

知道为什么我的内容始终可见并且不包含在选项卡 Pane 中吗？

编辑:查看生成的 HTML 可能会更容易:

<section id="about" class="section tabbable" style="height: 743px; ">
    <!-- Section Title -->
    <h2>About</h2>      
    <!-- Subsection Title Navigation -->
    <ul class="nav nav-pills" id="an">
        <li class=""><a data-toggle="pill" href="#about-content">About</a></li>
        <li class="active"><a data-toggle="pill" href="#execs">Your Executives</a></li>
        <li class=""><a data-toggle="pill" href="#governing-documents">Governing Documents</a></li>
    </ul><!--"/.nav-pills"-->   
    <div class="contentArea tab-content">
        <div class="contents tab-pane" id="about-content" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->     
        <div class="contents tab-pane active" id="execs" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->       
        </div><!-- /.contents -->
        <div class="contents tab-pane" id="governing-documents" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->       
    </div><!-- /.contentArea -->
</section>

Answer 1

如果您没有正确加载 bootstrap.css 文件，您将会遇到此行为。或者 LESS 的编译可能不包含 navs.less 文件。

否则，你的代码对我有用:

JSFiddle