2

Twitter Bootstrap のピル ナビゲーションを使用しようとしていますが、正しく動作しません。

タブコンテンツに「アクティブ」クラスが追加されています。しかし、それがすべてであり、実際には内容にまったく変化は見られません。すべてのコンテンツは単純に順番に表示され、タブ ペインにラップされません。

ここにPHPがあります。ヘッダーに単に 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 -->

コンテンツがすべて常に表示され、タブ ペインにラップされない理由は何ですか?

編集: 生成された 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>
4

1 に答える 1

2

bootstrap.cssファイルを適切にロードしていないと、この動作が発生します。または、LESS からのコンパイルにnavs.lessファイルが含まれていない可能性があります。

それ以外の場合、あなたのコードは私のために機能します:

JSFiddle

于 2012-08-14T20:47:07.377 に答える