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

Question

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 class="nav nav-tabs" role="tablist"  id="main_tab_content">
    <li role="presentation" class="active"><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 class="tab-content">
<div role="tabpanel" class="tab-pane" id="tab1">
<div class="panel panel-default">
<div class="panel-body">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.

Answer 1

 <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