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?