Load a PHP file in in a tab/div in HTML-CodePudding

I have a HTML file with 3 tabs. I want to load a PHP file when the user clicks on one specific tab (Tab1) out of 3 tabs.

Tabs Code:

<div id="content">
<div role="tabpanel">
<ul  role="tablist"  id="main_tab_content">
    <li role="presentation" ><a role="tab" data-toggle="tab" aria-controls="home" href="#home">Home</a></li>
    <li role="presentation"><a role="tab" data-toggle="tab" aria-controls="tab1" href="#tab1">Tab 1</a></li>
    <li role="presentation"><a role="tab" data-toggle="tab" aria-controls="tab2" href="#tab2">Tab 2</a></li>
</ul>

Tab1 Code:

<div >
<div role="tabpanel"  id="tab1">
<div >
<div >Yet to be integrated.
</div>
</div>
</div>

and so on for Home and Tab 2.

jquery load code:

<script>
$( ".tab1" ).load( "/test/index.php" );
</script>

The code was written by a colleague, I am trying to use the same html layout to load my PHP file. So far tried with with jquery load and i think issue i am facing is cz of the div class/id am using in load.

Any inputs will be useful.

Thanks in advance.

CodePudding user response：

<script>
$(document).ready(function(){
$('.tab_1').click(function(){
   
$.get( "/test/index.php", function( data ) {
  $( ". tab_1" ).html( data );
});
})
})
</script>

$( ".tab_1" ).html( data ); --> will receive all content from index.php change class .tab_1 to another class that you want to put content

CodePudding user response：

Got it working with php include.

Thanks @ZaidYasyaf