php – How to display individual file information from a tabs dynamically using ajax load?

Question:

I have the following layout of a vertical tabs :

$(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 understand the information, it is shown by means of 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, only one would be enough because the information received is through a <div id="#divTabs"></div> .

How can I display the information according to the selected tabs?

Answer:

I am going to modify a bit what you have done because there are several errors. I assume that what you want to do is load the content of fileX.php into the #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 duplicate IDs ( #divTabs ).

It seems to me that you are using .active-tab.tab-active at the same time in .tab-item but only the .tab-active does something.

HTML:

  • I added data-url="" with the URL of the file.
  • I replaced the id="#divTabs" by classes.
  • You could delete the style="display: none; and make changes to the 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:

  • The line $(".tab-content").hide(); You could delete and hide it by default from CSS .
  • $("ul.tabs-list li:first").addClass("tab-active").show(); the show() at the end I don't know what it does, because the li is not hidden.
$(".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);
});
Scroll to Top