Как показывать информацию об индивидуальных файлах с tabs dinamicamente используя ajax похвалите?

У меня есть следующий рисунок одного 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>

Я искал информацию, относящуюся к тому же самому, нашел, что возможно получать информацию посредством использования .load(file) я это нашел:

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") {
                //
            }
        });
    });
};

Докуда мне удалось понять информацию он появляется посредством одного <div id="#divTabs"></div> согласно избранный выбор, что также значит, что это было бы не очень нужно, создавать некоторые <div id="2" class="tab-content" style="display: none;"> чтобы показывать информацию, было бы достаточно только одного, потому что информация, которая получается, - посредством одного <div id="#divTabs"></div>.

Как я могу показывать информацию как отборный tabs?

9
задан 22.06.2019, 22:56
0 ответов