Quisiera saber como puedo poner dentro de mis tabs archivos php que muestran cierto tipo de contenido pero no se como hacerlo, aqui mi codigo, este codigo es la parte de mis tabs, lo hace todo como lo necesito pero ahora necesito que muestre un tipo de contenido especifico. Si yo pusiera todo mi contenido como tal en las tabs se alargaria mucho mi codigo e imagino que existe una forma mas simple y optima de hacer las cosas.
<div class="nav-tabs-custom ta">
<ul class="nav nav-tabs te">
<li><a href="#" class="tablinks" onclick="option(event, 'todo')">Todos</a></li> <!-- datos personales -->
<li><a href="#" class="tablinks" onclick="option(event, 'pistas')">Pistas</a></li> <!-- datos personales -->
<li><a href="#" class="tablinks" onclick="option(event, 'albumes')">Los álbumes</a></li> <!-- datos personales -->
<li><a href="#" class="tablinks" onclick="option(event, 'playlist')">Playlist</a></li> <!-- privacidad -->
<li><a href="#" class="tablinks" onclick="option(event, 'reposiciones')">Reposiciones</a></li>
<li><a href="#" class="tablinks" onclick="option(event, 'gusto')">Gustó</a></li>
</ul>
</div>
</div>
</div>
<!-- you can put the information here about tabs -->
<section class="box-content">
<div id="todo" class="tabcontent"style="display: block;">
<h3>Todo</h3>
<p>Aqui esta todo el contenido</p>
</div>
<div id="pistas" class="tabcontent"style="display: none;">
<h3>Pistas</h3>
<p>Estas son tus pistas</p>
</div>
<div id="albumes" class="tabcontent"style="display: none;">
<h3>Albumes</h3>
<p>Son todos los albumes</p>
</div>
<div id="playlist" class="tabcontent"style="display: none;">
<h3>Playlist</h3>
<p>Aqui se encuentran tus canciones</p>
</div>
<div id="reposiciones" class="tabcontent"style="display: none;">
<h3>Reposiciones</h3>
<p>Aqui se encuentran las reposiciones</p>
</div>
<div id="gusto" class="tabcontent"style="display: none;">
<h3>Gustó</h3>
<p>Estas son las personas a las que les gusta tu perfil</p>
</div>
</section>
<!-- END OF THE CONTENT TABS -->
<!-- this is for tabs dont touch please -->
<script>
function option(evt, opt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(opt).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<!-- thanks -->