9

Tengo el siguiente diseño de un tabs vertical:

$(function () {
	$(".tab-content").hide();
	$("ul.tabs-list li:first").addClass("active-tab").show();
	//Folling line changed to support multi tabs
	$(".tabs-container .tab-content:first-child").show();
	$("ul.tabs-list span").click(function(){
		$("ul.tabs-list li").removeClass("tab-active");
		$(this).parent("li").addClass("tab-active");
		var activeTab = $(this).attr("data-target");
		$(activeTab).siblings(".tab-content").hide();
		$(activeTab).fadeIn();
		return false;
	});
});
.vertical-tab {
  margin: 0px auto;
  position: relative;
  width: 100%;
  max-width: 1140px;
  display: flex;
  align-items: stretch;
}

ul.tabs-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 150px;
	list-style: none;
	padding: 0;
	display: flex;
	border-bottom: solid 1px #EAEAEA;
}
.tab-item {
	color: #898d98;
	font-size: .875em;
	cursor: pointer;
	display: inline-block;
	list-style: none;
	/*border-bottom: solid 1px #FFFFFF;*/
	outline: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	text-transform: capitalize;
}
.tab-item span, .tab-item span:visited, .tab-item span:active, .tab-item span:hover {
	text-decoration:none;
	color: #898d98;
	list-style: none;
	/*padding: 0 1.1em .4em;*/
	padding: 0.8em 1.1em 0.8em 1.1em;
	display:inline-block;
	font-size: 1.5em;
}
.tab-item span:hover{
	border-bottom: solid 1px #3E9CCA;
}
.tab-active {
	text-shadow: none;
	/*background-color: #f9f9f9ed;*/
	border-bottom: solid 1px #3E9CCA;
}
.tab-active span {
	color: #1ca0de;
}
.tabs-container {
	padding: 0px;
	clear: left;
	border-top: none;
	background: none;
}
.tab-content {
	/*margin: 1em 0 0 0;
	border-bottom: solid 1px #EAEAEA;
	padding-bottom: 1em;*/
	padding-bottom: 1em;
  padding: 20px 20px 20px 60px;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tabs">
		<div class="vertical-tab">
			<!-- Menú de opciones -->
			<ul class="tabs-list">
				<li class="tab-item active-tab tab-active">
					<span data-target="#1">Anuncio</span>
				</li>
				<li class="tab-item">
					<span data-target="#2">Tareas</span>
				</li>
			</ul>
			<!-- //END -->
			<div class="tabs-container">
				<div id="1" class="tab-content tab-content-active" style="">
					<div class="tab-content">
						<!-- Mostrar información-->
            <span>1</span>
						<div id="#divTabs"></div>
						<!-- // End Tab Content One -->
					</div>
				</div>
				<div id="2" class="tab-content" style="display: none;">
					<div class="tab-content">
						<span>2</span>
						<!-- Mostrar información-->
						<div id="#divTabs"></div>
						<!-- // End Tab Content Two -->
					</div>
				</div>
			</div>
		</div>
	</div>

Estuve buscando información referente al mismo, encontré que se puede obtener información mediante el uso de .load(file) encontré esto:

function show_tab(tab){
    //var data = $( "#" ).serialize();
    //var url = '.php?tab=' + tab;

    $.ajax({
        type: "POST",
        url: url,
        data: data
    }).done(function(resp){
        tab = parseInt(tab);
        var dataTarget = parseInt(resp.dataTarget);
        switch(dataTarget) {
            case 1:
                urlphp = 'file1.php'
            break;
            case 2:
                urlphp = 'file2.php'
            break;
            case 3:
                urlphp = 'file3.php'
            break;
            default:
                urlphp = 'file1.php'
            break;
        }

        $('#divTabs').load(urlphp,function(responseTxt, statusTxt, xhr){
            if(statusTxt === "success") {
                $('.tab').css( "display", "none" );
                $('#tab'+ tab).fadeIn("slow");
            }

            if(statusTxt === "error") {
                //
            }
        });
    });
};

Hasta donde logre entender la información se muestra mediante un <div id="#divTabs"></div> según la opción escogida, lo que también significa que sería innecesario crear varios <div id="2" class="tab-content" style="display: none;"> para mostrar la información, bastaría solo con uno porque la información que se recibe es mediante un <div id="#divTabs"></div>.

¿Cómo puedo mostrar la información según el tabs seleccionado?

1 respuesta 1

1

Voy a modificar un poco lo que tenés hecho porque hay varios errores. Asumo que lo que querés hacer es cargar el contenido de fileX.php dentro del #divTabs correspondiente al tab clickeado.

Si la URL a cargar depende del tab, por qué no definirla directamente en el HTML? Por otro lado, no podes tener IDs duplicados (#divTabs).

Me parece que estás usando .active-tab.tab-active al mismo tiempo en .tab-item pero solo hace algo el .tab-active.

HTML:

  • Agregué data-url="" con la URL del archivo.
  • Reemplacé los id="#divTabs" por clases.
  • Se podría borrar el style="display: none; y hacer cambios en el CSS.
<div class="vertical-tab">
    <!-- Menú de opciones -->
    <ul class="tabs-list">
        <li class="tab-item tab-active">
            <span data-target="#1" data-url="file1.php">Anuncio</span>
        </li>
        <li class="tab-item">
            <span data-target="#2" data-url="file2.php">Tareas</span>
        </li>
    </ul>
    <!-- //END -->
    <div class="tabs-container">
        <div id="1" class="tab-content tab-content-active" style="">
            <div class="tab-content">
                <!-- Mostrar información-->
                <span>1</span>
                <div class="divTabs"></div>
                <!-- // End Tab Content One -->
            </div>
        </div>
        <div id="2" class="tab-content" style="display: none;">
            <div class="tab-content">
                <span>2</span>
                <!-- Mostrar información-->
                <div class="divTabs"></div>
                <!-- // End Tab Content Two -->
            </div>
        </div>
    </div>
</div>

JavaScript:

  • La línea $(".tab-content").hide(); la podrías borrar y ocultar por defecto desde CSS.
  • $("ul.tabs-list li:first").addClass("tab-active").show(); el show() al final no se que hace, porque el li no está oculto.
$(".tab-content").hide();
$("ul.tabs-list li:first").addClass("tab-active").show(); // Acá decía "active-tab"

// Folling line changed to support multi tabs
$(".tabs-container .tab-content:first-child").show();
$("ul.tabs-list span").click(function(){
    $("ul.tabs-list li").removeClass("tab-active");
    $(this).parent("li").addClass("tab-active");
    var activeTab = $(this).attr("data-target");
    $(activeTab).siblings(".tab-content").hide();
    $(activeTab).fadeIn();

    // Carga el archivo
    var url = $(this).data('url');
    $(activeTab).find('.divTabs').load(url);
});
5
  • Hola @azeós gracias por su respuesta, me podrías explicar cómo se cargan los archivos, como lo identifica al hacer clic en las opciones del tabs, simplemente debo agregar todos los fieles que tenga en var url = $(this).data('url'); pero no veo nada que lo identifique es decir si el archivo file3.php quiero que se muestre en la opción 1 y el file2.php se muestre en la segunda opción.
    – Lily
    el 25 jun. 2019 a las 12:59
  • Volvé a leer mi respuesta, eso está definido en el código HTML en el data-url de cada tab.
    – azeós
    el 25 jun. 2019 a las 15:55
  • Yo pensé que las rutas se iban agrega en el código javascript = urlphp = 'file1.php'
    – Lily
    el 26 jun. 2019 a las 16:07
  • @Lily podrías agregar las rutas en el archivo js, pero es menos práctico y menos reutilizable. Si quisieras utilizar el mismo código para otros tabs que cargan otros archivos, no podrías. De esta manera, al tener definidos los archivos en el código HTML, el JS se mantiene siempre igual.
    – azeós
    el 27 jun. 2019 a las 5:24
  • @Lily pudiste probar el código?
    – azeós
    el 30 jun. 2019 a las 21:12

Tu Respuesta

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

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