取消包含php文件

Question

I am using nav-tabs with tab-content from bootstrap.

For each tab I said include_once('some_file.php');

That file get database info and it contains something that require my jquery code to work.

Now, it works when I am on first tab but when I open second and by that include one more file with same content that require my jquery code on click on that content the content opens up in first div not in second.

If you understand what am I talking about.

I am wondering is there way to un-include included files while tab isn't active but by php?

Other solution is to for each tab make different jquery code on same way and change content for each tab which is a lot of code.

I made JS FIDDLE where you can try to open tab2 called photos and click on text under "click here" and nothing will happen but after that click on the first tab and the content will be showed as appeared.

JSFIDDLE CHECK PLEASE

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#all">All</a></li>
    <li><a data-toggle="tab" href="#p">Photos</a></li>

  </ul>
<div class="tab-content">
   <div id="all" class="tab-pane fade in active"><p class="ch">
     Click here
     </p>
     <div id="open" style="background: rgba(0,0,0,.4); position:fixed; width: 100%; height:100%; top:0; left:0; display:none;">

     </div>
   </div>


    <div id="p" class="tab-pane fade"> <p class="ch">
     Click here
     </p>
   <div id="open" style="background: rgba(0,0,0,.4); position:fixed; width: 100%; height:100%; top:0; left:0; display:none;">

     </div>


  </div>
  </div>
$(document).ready(function(){

$('.ch').click(function(){

    $("#open").css("display","");

});

});

Answer 1

ID should be unique in a DOM . "fade active in " will be added to every tab content div to switch/navigate between tabs .. if you customize default behaviour you have to manually write code to add active classes