我试图在WordPress循环中显示一些引导选项卡内容。未单击选项卡。

以下是引导代码：

        <ul class="citenav nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab18</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab2" aria-selected="false">tab2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab3" aria-selected="false">tab3</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab4" aria-selected="false">tab4</a>
          </li>
        </ul>

        <div class="tab-content" id="myTabContent">
          <div class="cite tab-pane fade show active" id="tab1-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab1-tab">
              <?php echo "tab1 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab2-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab2-tab">
              <?php echo "tab2 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab3-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab3-tab">
            <?php echo "tab3 content"; ?>
          </div>
            <div class="cite tab-pane fade" id="tab4-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab4-tab">
            <?php echo "tab4 content"; ?>
          </div>
        </div>

        <style>
            .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #495057;
            background-color: #fff;
            border-color: #ddd #ddd #fff;
        }

        .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
        }
        .nav-link {
            display: block;
            padding: .5rem 1rem;
        }
        </style>

此外，请注意，这些代码用作模板零件。我在Ajax load more repeater模板中进行了尝试，然后选项卡开始工作。

UPDATE: Adding JQuery external link within just solved the issue.

parentNodeOfTab.on( \'click\', function(){
   // Code

   return false;
} );

parentNodeOfTab.on( \'click\', function( event){
   event.stopPropagation();

   // Code
} );