Load html with Jquery

Asked

Viewed 512 times

1

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

I have this jquery code, which I put the html code inside the class contents:

How would you call an html file and show dentra from the class contents?

$('.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>
<div style="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

  • $("#Divid"). load("page.html")

  • is a tab system and I call html like this, Return $('#text'). html(this['aba' + aba_index]['content']). How would you adapt this $("#Divid"). (load"page.html") to my code?

2 answers

1


There are several ways to bring documents via DOM to the page

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

$(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]);
    });
});

  • for each tab would be a different html page to call, currently I’m calling it, Return $('#text'). html(this['aba' + aba_index]['content']) as you can see in the code. How would you do this with your code?

  • update the response, create an array, and set by tab index the index of the array to page

  • I couldn’t make it work, it’s not showing the html file, you could edit it in Jsfiddle?

  • checks if the file path is right, press F12 and go to console and look for any error, pos in jsfiddle I n can load files dynamically

  • Strange no error appears in the console and does not open the html file, could you do in jsfiddle? even if not to load files dynamically. Just for me to see if I’m doing it right. :)

  • You should not have put inside the $(Document). ready(Function(){ ... })

  • https://jsfiddle.net/og06yxxj/

  • I edited the code check now

  • now it worked, only it has the following, when you click on a tab, the load() should open the html file in the <div id="text"></div>, would be like?

  • 1

    yes, change $(this). load to $("#text"). load

  • if you have solved the problem do not forget to mark the answer as correct

  • yes solved yes, thank you ;)

  • as I would to place an anchor, so when you click on the tab, the scroll bar goes to div #text?

Show 8 more comments

0

You don’t need to use jQuery to load the file, actually. Only if you want, because you can just load the html into one <object> or <iframe> initially hidden and just show it afterwards.

For example, add to 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 throw them into 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 don’t want to generate the <div class=conteudo_abas> via Javascript, it would be easier still, you would only need to leave your html this way without using Javascript for anything:

<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 an example name, rename to the desired HTML file name.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.