Load html with Jquery

Question

Load html with Jquery

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I need to call a html file and show inside a div using Jquery.

I have this jquery code, which puts the html code inside the class conteudo_abas :

How would you call a html file and display inside the conteudo_abas class?

$('.abas').on('click', function(){
   $('.abas').removeClass('active');
   $(this).addClass('active');
   aba_index = $(this).attr('tabindex');

   this.aba1 = {
      conteudo: '<div class="conteudo_abas">dsad</div>'
   }

   this.aba2 = {
      conteudo: '<div class="conteudo_abas">asdsad</div>'
   }

   this.aba3 = {
      conteudo: '<div class="conteudo_abas">zxczx czxc zx</div>'
   }

   this.aba4 = {
      conteudo: '<div class="conteudo_abas">dffxg f</div>'
   }

   this.aba5 = {
      conteudo: '<div class="conteudo_abas"> sdfdsf </div>'
   }

	 return $('#texto').html(this['aba' + aba_index]['conteudo']);
});

$(document).ready(function(){
   $('.abas:first').trigger('click').addClass('active');
   
});

.conteudo_abas{
  border:1px solid #000;  
}
.abas{
   display: inline-block;
   height: 40px;
   line-height: 40px;
   padding: 0 15px;
   text-align: center;
   border-bottom: 3px solid #ddd;
   float: left;
   cursor: pointer;
   outline: none;
}

.abas:hover,
.abas:focus{
   color: #fff;
}

.abas:nth-child(1){
   border-bottom-color: orange;
}
   .abas:nth-child(1):hover,
   .abas:nth-child(1):focus{
      background: orange;
   }

.abas:nth-child(2){
   border-bottom-color: red;
}
   .abas:nth-child(2):hover,
   .abas:nth-child(2).active {
      background: red;
   }

.abas:nth-child(3){
   border-bottom-color: purple;
}
   .abas:nth-child(3):hover,
   .abas:nth-child(3):focus{
      background: purple;
   }

.abas:nth-child(4){
   border-bottom-color: blue;
}
   .abas:nth-child(4):hover,
   .abas:nth-child(4):focus{
      background: blue;
   }

.abas:nth-child(5){
   border-bottom-color: green;
}
   .abas:nth-child(5):hover,
   .abas:nth-child(5):focus{
      background: green;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divstyle="margin-top:1000px;">
</div>
<div class="abas abas1" tabindex="1">
   Aba 1
</div>
<div class="abas abas2" tabindex="2">
   Aba 2
</div>
<div class="abas abas3" tabindex="3">
   Aba 3
</div>
<div class="abas abas4" tabindex="4">
   Aba 4
</div>
<div class="abas abas5" tabindex="5">
   Aba 5
</div>
<br clear="all" /><br />
<div id="texto"></div>

jquery

asked by anonymous 19.12.2017 / 11:39

2 answers

0

You do not need to use jQuery to load the file, actually. Only if you want, because you can simply load the html into a <object> or <iframe> initially hidden and just show it later.

For example, add in your html anywhere:

<object id=aba1 style='display: none' type="text/html" data="aba1.html"></object>
<object id=aba2 style='display: none' type="text/html" data="aba2.html"></object>
<object id=aba3 style='display: none' type="text/html" data="aba3.html"></object>
<object id=aba4 style='display: none' type="text/html" data="aba4.html"></object>
<object id=aba5 style='display: none' type="text/html" data="aba5.html"></object>

Subsequently, you can simply play them inside your .conteudo_abas and show them:

//Mostrei apenas a aba 01 mas você pode fazer igual pras outras.
$('.conteudo_abas').append($('#aba1'));
$('#aba1').show();

Or if you do not want to generate <div class=conteudo_abas> via Javascript, it would be even easier, you just need to leave your html in this way without using Javascript at all:

<div class=conteudo_abas>
  <object type="text/html" data="aba1.html"></object>
  <object type="text/html" data="aba2.html"></object>
  <object type="text/html" data="aba3.html"></object>
  <object type="text/html" data="aba4.html"></object>
  <object type="text/html" data="aba5.html"></object>
</div>

PS: aba'X'.html was a sample name, rename to the name of the desired HTML file.

19.12.2017 / 12:58

Invalid characters in the path in File.Move () Importing modules into PyCharm

score 1 · Accepted Answer

There are several ways to bring DOM documents to the page

load() $.post() $.get()
create an array with the

$(document).ready(function(){
    $('.abas').on('click', function(){
        var paginas = ["pagina1.html","pagina2.html","pagina3.html"];
        aba_index = $(this).attr('tabindex');
        $('.abas').removeClass('active');
        $(this).addClass('active');
        $(this).load("caminho/"+paginas[parseInt(aba_index) - 1]);
    });
});