0

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 -->
2
  • crea diferentes archivos php y en cada tab podrias hacer un include() ? Commented el 29 jul. 2021 a las 15:12
  • lo intentare @jose
    – Aldhair
    Commented el 29 jul. 2021 a las 15:14

1 respuesta 1

0

La solucion mas normal y sencilla para un codigo mas bonito fue que al momento de llamar una tab mandar a llamar tal archivo, gracias por la ayuda @Jose Vasquez

<section class="box-content">
<div id="todo" class="tabcontent"style="display: block;">
<?php include_once("tabs-content/Todo.php") ?>
    </div>

    <div id="pistas" class="tabcontent"style="display: none;">
        <?php include_once("tabs-content/Pistas.php") ?>
    </div>

    <div id="albumes" class="tabcontent"style="display: none;">
    <?php include_once("tabs-content/Albumes.php") ?>
    </div>

    <div id="playlist" class="tabcontent"style="display: none;">
    <?php include_once("tabs-content/Playlist.php") ?>
    </div>

    <div id="reposiciones" class="tabcontent"style="display: none;">
    <?php include_once("tabs-content/Reposiciones.php") ?>
    </div>

    <div id="gusto" class="tabcontent"style="display: none;">
    <?php include_once("tabs-content/Gusto.php") ?>
    </div>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.