Load tab only by clicking (with jquery)

Asked

Viewed 322 times

0

I’m using the flap system with jqueryui and came across a problem where I need that when loading the page, just load the first tab, there is a way to do this?

jquery load aba

  • But what good would the other flaps be then?

  • That’s easy, now tell me, when the other tabs might be visible?

  • one way would be you say in jquery q the other tabs start hidden and qnd an input from the displayed tab is filled in, the following would be displayed. I didn’t understand what it would be like to click if the others were hidden.

  • You can use AJAX to load the tabs, as soon as the user clicks on the tab, a function, for example, load() is fired for each tab and loads the contents.

  • Leandrade, the other tabs are for her content, I just want to do this because there is content in the tab, like the google maps that loads when loading the page, in the first tab there is nothing you need to load like this, so a person who enters the page would have to wait to load all the content of the page they’re not seeing, that’s kind of an inconvenience, why do

1 answer

0

Face is basically what is in the example. In TAB 1 you load the content on the same page, on the other tabs, you load a different html for each one.

$(document).ready(function() {
    $("#tabs").tabs({
      beforeLoad: function(event, ui) {
        ui.jqXHR.fail(function() {      // função se houver algum erro
          ui.panel.html(
            "Mensagens de erro caso o conteúdo não seja carregado por algum motivo" );
        });
      }
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="arquivoTab2.html">Tab 2</a></li>
    <li><a href="arquivoTab3.html">Tab 3</a></li>
    <li><a href="arquivoTab4.html">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
    <p>TEXTO QUE JÁ VEM PRE CARREGADO QUANDO VOCÊ ACESSAR A PÁGINA.</p>
  </div>
</div>

  • I don’t think you didn’t understand, I don’t want to create html page but leave everything on the same page, but just load the contents of the first tab+the rest around the page

  • Without leaving separate html, with Ajax, it will not work. You will have to search for another technology that loads elements from the page itself for events.

  • blz thank you for the reply

Browser other questions tagged jquery load aba

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