Bootstrap tabs are not being clicked in WordPress loop

Question

Bootstrap tabs are not being clicked in WordPress loop

Noobie

2022年5月21日 12:03

I am trying to show some Bootstrap tab contents within a WordPress loop. The tabs are not being clicked.

Here are the bootstrap codes:

        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

Also, please be noted that these codes are used as a template parts. I tried it in Ajax load more repeater template, then the tabs are working.

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

Topic twitter-bootstrap loop Wordpress

Category Web

Brada · Accepted Answer · 2019年2月23日 23:10

I think that's because Bootstrap use document.on('click', 'selector', function ).

This means that the function will execute only when the click event reached the document Node.

I tested and If you have a parent element which does not propagate the 'click' event, then that can be a reason of why your code doesn't work...

Ex:

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

   return false;
} );

or

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

   // Code
} );

P.S: You can Google and read more about JavaScript propagation.

Bootstrap tabs are not being clicked in WordPress loop

About