0

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.

Improve this question

1 Answer 1

Reset to default
0

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.

Improve this answer
1
  • Just adding Jquery link solved the problem. Thanks anyway. Commented Feb 26, 2019 at 18:21

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.