JqueryUI - Tabs
As guias são conjuntos de conteúdo agrupados logicamente que nos permitem alternar rapidamente entre eles. As guias nos permitem economizar espaço como acordeões. Para que as guias funcionem corretamente, é necessário usar um conjunto de marcações -
As guias devem estar em uma lista ordenada (<ol>) ou não ordenada (<ul>).
Cada título da guia deve estar dentro de cada <li> e envolvido por uma tag âncora (<a>) com um atributo href .
Cada painel da guia pode ser qualquer elemento válido, mas deve ter um id , que corresponde ao hash na âncora da guia associada.
jQueryUI nos fornece o método tabs () altera drasticamente a aparência dos elementos HTML dentro da página. Este método atravessa (internamente no jQuery UI) o código HTML e adiciona novas classes CSS aos elementos em questão (aqui, as guias) para dar a eles o estilo apropriado.
Sintaxe
o tabs () método pode ser usado em duas formas -
Método $ (seletor, contexto) .tabs (opções)
$ (seletor, contexto) .tabs ("action", params) Método
Método $ (seletor, contexto) .tabs (opções)
O método tabs (opções) declara que um elemento HTML e seu conteúdo devem ser gerenciados como guias. O parâmetro options é um objeto que especifica a aparência e o comportamento das guias.
Sintaxe
$(selector, context).tabs (options);
Você pode fornecer uma ou mais opções por vez usando o objeto JavaScript. Se houver mais de uma opção a ser fornecida, você irá separá-las usando uma vírgula da seguinte forma -
$(selector, context).tabs({option1: value1, option2: value2..... });
A tabela a seguir lista as diferentes opções que podem ser usadas com este método -
Sr. Não. | Opção e descrição |
---|---|
1 | ativo Esta opção especifica a guia / painel ativo atual. Por padrão, seu valor é0. Option - active Esta opção especifica a guia / painel ativo atual. Por padrão, seu valor é0. Isso pode ser do tipo -
Syntax
|
2 | dobrável Esta opção definida como verdadeira , permite que as guias sejam desmarcadas. Quando definido como falso (o padrão), clicar em uma guia selecionada não desmarca (ela permanece selecionada). Por padrão, seu valor éfalse. Option - collapsible Esta opção definida como verdadeira , permite que as guias sejam desmarcadas. Quando definido como falso (o padrão), clicar em uma guia selecionada não desmarca (ela permanece selecionada). Por padrão, seu valor éfalse. Syntax
|
3 | Desativado Esta opção usa uma matriz para indicar as guias de índice que estão desabilitadas (e, portanto, não podem ser selecionadas). Por exemplo, use [0, 1] para desabilitar as duas primeiras guias. Por padrão, seu valor éfalse. Option - disabled Esta opção usa uma matriz para indicar as guias de índice que estão desabilitadas (e, portanto, não podem ser selecionadas). Por exemplo, use [0, 1] para desabilitar as duas primeiras guias. Por padrão, seu valor éfalse. Isso pode ser do tipo -
Syntax
|
4 | evento Esta opção é um nome do evento que permite aos usuários selecionar uma nova guia. Se, por exemplo, esta opção for definida como "mouseover", passar o mouse sobre uma guia irá selecioná-la. Por padrão, seu valor é"click". Option - event Esta opção é um nome do evento que permite aos usuários selecionar uma nova guia. Se, por exemplo, esta opção for definida como "mouseover", passar o mouse sobre uma guia irá selecioná-la. Por padrão, seu valor é"click". Syntax
|
5 | heightStyle Esta opção controla a altura do widget de guias e de cada painel. Por padrão, seu valor é"content". Option - heightStyle Esta opção controla a altura do widget de guias e de cada painel. Por padrão, seu valor é"content". Os valores possíveis são -
Syntax
|
6 | ocultar Esta opção especifica como animar a ocultação do painel. Por padrão, seu valor énull. Option - hide Esta opção especifica como animar a ocultação do painel. Por padrão, seu valor énull. Isso pode ser do tipo -
Syntax
|
7 | exposição Esta opção especifica como animar a exibição do painel. Por padrão, seu valor énull. Option - show Esta opção especifica como animar a exibição do painel. Por padrão, seu valor énull. Isso pode ser do tipo -
Syntax
|
A seção a seguir mostrará alguns exemplos de funcionamento da funcionalidade das guias.
Funcionalidade padrão
O exemplo a seguir demonstra um exemplo simples de funcionalidade de guias, sem passar parâmetros para o tabs() método.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-1" ).tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-1">
<ul>
<li><a href = "#tabs-2">Tab 1</a></li>
<li><a href = "#tabs-3">Tab 2</a></li>
<li><a href = "#tabs-4">Tab 3</a></li>
</ul>
<div id = "tabs-2">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-4">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htme abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída. Agora, você pode brincar com o resultado -
No exemplo acima, clique nas guias para alternar entre o conteúdo.
Uso de heightStyle, recolhível e ocultar
O exemplo a seguir demonstra o uso de três opções (a) heightStyle (b) collapsiblee (c) hide na função de guias do JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-5" ).tabs({
heightStyle:"fill",
collapsible:true,
hide:"slideUp"
});
});
</script>
<style>
#tabs-5{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-5">
<ul>
<li><a href = "#tabs-6">Tab 1</a></li>
<li><a href = "#tabs-7">Tab 2</a></li>
<li><a href = "#tabs-8">Tab 3</a></li>
</ul>
<div id = "tabs-6">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-8">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -
Clique na guia selecionada para alternar seu conteúdo fechado / aberto. Você também pode ver o efeito de animação "slideUp" quando a guia é fechada.
Uso do Evento
O exemplo a seguir demonstra o uso de três opções event na função de guias do JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-9" ).tabs({
event:"mouseover"
});
});
</script>
<style>
#tabs-9{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-9">
<ul>
<li><a href = "#tabs-10">Tab 1</a></li>
<li><a href = "#tabs-11">Tab 2</a></li>
<li><a href = "#tabs-12">Tab 3</a></li>
</ul>
<div id = "tabs-10">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit... </p>
</div>
<div id = "tabs-11">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-12">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htme abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída. Agora, você pode brincar com o resultado -
No exemplo acima, alterne as seções abertas / fechadas com o mouse sobre as guias.
$ (seletor, contexto) .tabs ("action", params) Método
O método tabs ("ação", params) permite uma ação nas abas (através de um programa JavaScript), selecionando, desabilitando, adicionando ou removendo uma aba. A ação é especificada como uma string no primeiro argumento (por exemplo, "adicionar" para adicionar uma nova guia). Confira as ações que podem ser aprovadas, na tabela a seguir.
Sintaxe
$(selector, context).tabs ("action", params);;
A tabela a seguir lista as diferentes ações que podem ser usadas com este método -
Sr. Não. | Ação e Descrição |
---|---|
1 | destruir Esta ação destrói completamente a funcionalidade das guias de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Action - destroy Esta ação destrói completamente a funcionalidade das guias de um elemento. Os elementos retornam ao seu estado pré-inicial. Este método não aceita nenhum argumento. Syntax
|
2 | desabilitar Esta ação desativa todas as guias. Este método não aceita nenhum argumento. Action - disable Esta ação desativa todas as guias. Este método não aceita nenhum argumento. Syntax
|
3 | desativar (índice) Esta ação desativa a guia especificada. Onde índice é a guia a ser desativada. Action - disable( index ) Esta ação desativa a guia especificada. Onde índice é a guia a ser desativada. Para desativar mais de uma guia de uma vez, defina a opção disabled: $ ("#tabs") .tabs ("option", "disabled", [1, 2, 3]). Syntax
|
4 | habilitar Esta ação ativa todas as guias. Esta assinatura não aceita nenhum argumento. Action - enable Esta ação ativa todas as guias. Esta assinatura não aceita nenhum argumento. Syntax
|
5 | habilitar (índice) Esta ação ativa uma guia especificada. Onde índice é a guia a ser habilitada. Action - enable( index ) Esta ação ativa uma guia especificada. Onde índice é a guia a ser habilitada. Para habilitar mais de uma guia de uma vez, redefina a propriedade disabled como: $ ("#example") .tabs ("option", "disabled", []) ;. Syntax
|
6 | carregando índice ) Esta ação força um recarregamento da guia indexada, ignorando o cache. Onde o índice é a guia a ser carregada. Action - load( index ) Esta ação força um recarregamento da guia indexada, ignorando o cache. Onde o índice é a guia a ser carregada. Syntax
|
7 | opção (optionName) Esta ação obtém o valor atualmente associado ao optionName especificado . Action - option( optionName ) Esta ação obtém o valor atualmente associado ao optionName especificado . Syntax
|
8 | opção Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções das guias atuais. Action - option Esta ação obtém um objeto contendo pares de chave / valor que representam o hash de opções das guias atuais. Este método não aceita nenhum argumento. Syntax
|
9 | opção (optionName, value) Esta ação define o valor da opção tabs associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção. Action - option( optionName, value ) Esta ação define o valor da opção tabs associada ao optionName especificado . O argumento optionName é o nome da opção a ser definida e value é o valor a ser definido para a opção. Syntax
|
10 | opção (opções) Esta ação define uma ou mais opções para as guias. Action - option( options ) Esta ação define uma ou mais opções para as guias. Syntax
|
11 | refrescar Esta ação recalcula a altura dos painéis de guia quando quaisquer guias que foram adicionadas ou removidas diretamente no DOM. Os resultados dependem do conteúdo e da opção heightStyle . Action - refresh Esta ação recalcula a altura dos painéis de guia quando quaisquer guias que foram adicionadas ou removidas diretamente no DOM. Os resultados dependem do conteúdo e da opção heightStyle . Syntax
|
12 | ferramenta Esta ação retorna o elemento que serve como widget tabs, anotado com o nome da classe ui-tabs . Action - widget Esta ação retorna o elemento que serve como widget tabs, anotado com o nome da classe ui-tabs . Syntax
|
Uso de Desativar Ação ()
Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso do método disable () .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-13" ).tabs();
$( "#tabs-13" ).tabs("disable");
});
</script>
<style>
#tabs-13{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-13">
<ul>
<li><a href = "#tabs-14">Tab 1</a></li>
<li><a href = "#tabs-15">Tab 2</a></li>
<li><a href = "#tabs-16">Tab 3</a></li>
</ul>
<div id = "tabs-14">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-15">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-16">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htm e abri-lo em um navegador padrão que suporte javascript, você também deve ver a seguinte saída -
Aqui você pode ver que todas as guias estão desabilitadas.
Uso de ação para desativar (índice)
Agora vamos ver um exemplo usando as ações da tabela acima. O exemplo a seguir demonstra o uso do método disable (index) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-17" ).tabs();
$( "#tabs-17" ).tabs("disable",2);
});
</script>
<style>
#tabs-17{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-17">
<ul>
<li><a href = "#tabs-18">Tab 1</a></li>
<li><a href = "#tabs-19">Tab 2</a></li>
<li><a href = "#tabs-20">Tab 3</a></li>
</ul>
<div id = "tabs-18">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-19">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-20">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -
No exemplo acima, você observa que a guia 3 está desabilitada.
Gerenciamento de eventos nos elementos das guias
Além do método de tabs (opções) que vimos nas seções anteriores, JqueryUI fornece métodos de evento que são acionados para um evento específico. Esses métodos de evento estão listados abaixo -
Sr. Não. | Método e descrição do evento |
---|---|
1 | ativar (evento, ui) Este evento é acionado após a guia ser ativada (após a conclusão da animação). Event - activate(event, ui) Este evento é acionado após a guia ser ativada (após a conclusão da animação). Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -
Syntax
|
2 | beforeActivate (evento, ui) Este evento é acionado antes que a guia seja ativada. Event - beforeActivate(event, ui) Este evento é acionado antes que a guia seja ativada. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -
Syntax
|
3 | beforeLoad (evento, ui) Este evento é acionado quando uma guia remota está prestes a ser carregada, após o evento beforeActivate . Este evento é disparado antes da solicitação Ajax ser feita. Event - beforeLoad(event, ui) Este evento é acionado quando uma guia remota está prestes a ser carregada, após o evento beforeActivate . Este evento é disparado pouco antes da solicitação Ajax ser feita. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -
Syntax
|
4 | criar (evento, ui) Este evento é disparado quando as guias são criadas. Event - create(event, ui) Este evento é disparado quando as guias são criadas. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -
Syntax
|
5 | carregar (evento, ui) Este evento é disparado após o carregamento de uma guia remota. Event - load(event, ui) Este evento é disparado após o carregamento de uma guia remota. Onde o evento é do tipo Evento e ui é do tipo Objeto . Os valores possíveis de ui são -
Syntax
|
Exemplo
O exemplo a seguir demonstra o uso do método de evento em widgets de guias. Este exemplo demonstra o uso de eventos ativar e criar .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-21" ).tabs({
activate: function( event, ui ) {
var result = $( "#result-2" ).empty();
result.append( "activated" );
},
create: function( event, ui ) {
var result = $( "#result-1" ).empty();
result.append( "created" );
}
});
});
</script>
<style>
#tabs-21{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
</head>
<body>
<div id = "tabs-21">
<ul>
<li><a href = "#tabs-22">Tab 1</a></li>
<li><a href = "#tabs-23">Tab 2</a></li>
<li><a href = "#tabs-24">Tab 3</a></li>
</ul>
<div id = "tabs-22">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-23">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-24">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
</div>
</div><br>
<span class = "resultarea" id = result-1></span><br>
<span class = "resultarea" id = result-2></span>
</body>
</html>
Vamos salvar o código acima em um arquivo HTML tabsexample.htm e abri-lo em um navegador padrão que suporte javascript, você verá a seguinte saída -
Clique nas guias para ver uma mensagem impressa abaixo sobre eventos específicos.