JQuery

Separadores (Tabs)

Publicado por antlou em 27/07/2015

No quarto script jquery, utilizando a biblioteca JQuery-ui serão desenvolvidos separadores de conteúdos

Resultado:

Separador 1
Separador 2
Separador 3

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.

Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.

Maecenas ligula eros, blandit nec, pharetra at, semper at, magna.

Nullam ac lacus. Nulla facilisi.

tabs.html



    <link rel="stylesheet" href="jquery-ui-1.11.4/themes/smoothness/jquery-ui.css">
    
    <script src="jquery-2.1.1.js"></script>
    <script src="jquery-ui-1.11.4/jquery-ui.js"></script>
      
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Separador 1</a></li>
        <li><a href="#tabs-2">Separador 2</a></li>
        <li><a href="#tabs-3">Separador 3</a></li>
    </ul>  
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </p>
    </div>
    <div id="tabs-2">
        <p>Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis.</p>
        <p>Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. </p>
    </div>
    <div id="tabs-3">
        <p>Nullam ac lacus. Nulla facilisi.</p>
    </div>
</div>

voltar para o topo ↑

Download Código

Simples...! Espero ter sido útil e motivados a fazer mais experiências.

Deixe aqui a sua avaliação.

1 votos - 5 pontos - 9 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.