I have the following layout of a 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>
I was looking for information regarding it, I found that information can be obtained by using .load(file)
I found this:
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") {
//
}
});
});
};
As far as I can understand, the information is displayed using a <div id="#divTabs"></div>
according to the option chosen, which also means that it would be unnecessary to create several <div id="2" class="tab-content" style="display: none;">
to display the information, just one would suffice because the information that is received is through a <div id="#divTabs"></div>
.
How can I display the information according to the selected tabs?
I am going to modify a little what you have done because there are several errors. I assume that what you want to do is load the content
fileX.php
inside the one#divTabs
corresponding to the clicked tab.If the URL to load depends on the tab, why not define it directly in the HTML? On the other hand, you cannot have
IDs
duplicates (#divTabs
).It seems to me that you are using
.active-tab.tab-active
at the same time in.tab-item
but it only does something the.tab-active
.HTML:
data-url=""
with the oneURL
from the file.id="#divTabs"
with classes.style="display: none;
and make changes to theCSS
.javascript:
$(".tab-content").hide();
and hide it by default fromCSS
.$("ul.tabs-list li:first").addClass("tab-active").show();
In theshow()
end I don't know what he does, becauseli
he is not hidden.