Ir para conteúdo
Fórum Script Brasil
  • 0

Tabs

olimpia

Perguntado por olimpia,

 Share

Pergunta

olimpia

olimpia

Postado
Postado

Com o codigo abaixo, ao ser carregada é gerado na pagina duas abas, mas o textbox é o mesmo para as duas abas

Eu gostaria de criar uma tela para cada aba, é que todas elas fossem carregadas juntas quando a pagina for aberta, ou seja, quando for clicado na aba a pagina não precisa ser atualizada para exibir o conteudo da determinda aba

Outra coisa, não funciona no Mozila, so funfou no IE

alguém pode dar uma ajuda para resolver isto?

<HTML>

<HEAD>

  <title>webTabs</title>

  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

  <meta name="CODE_LANGUAGE" Content="C#">

  <meta name="vs_defaultClientScript" content="JavaScript">

  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

  <style type="text/css"> UNKNOWN { COLOR: black; TEXT-DECORATION: none }

  A:visited { COLOR: purple; TEXT-DECORATION: none }

  A:active { COLOR: blue; TEXT-DECORATION: none }

  TABLE.menu { FONT-SIZE: 11px; MARGIN: 2px; WIDTH: 600px; FONT-FAMILY: arial }

  TABLE.inline { BORDER-RIGHT: #ffffff 2px inset; BORDER-TOP: #ffffff 2px inset; BORDER-LEFT: #ffffff 2px inset; BORDER-BOTTOM: #ffffff 2px inset }

  TD.default { BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 2px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 5px 5px 0px; VERTICAL-ALIGN: bottom; BORDER-LEFT: #ffffff 2px outset; CURSOR: default; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid }

  TD.menu { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: bottom; CURSOR: default; PADDING-TOP: 5px; BORDER-BOTTOM: #ffffff 2px inset }

  TD.outline { BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 10px; BORDER-TOP: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 10px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 20px; BORDER-BOTTOM: #ffffff 2px outset; HEIGHT: 400px }

  SPAN.left { BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 2px; BORDER-BOTTOM: 0px }

  SPAN.right { BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: 0px; PADDING-TOP: 2px; BORDER-BOTTOM: 0px }

  SPAN.menu { BORDER-RIGHT: #ffffff 2px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 2px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 5px 0px 0px; BORDER-LEFT: #ffffff 2px outset; PADDING-TOP: 2px; BORDER-BOTTOM: 0px }

  SPAN.default { BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 2px; BORDER-BOTTOM: #ffffff 0px outset; FONT-FAMILY: arial }

  SPAN.n4menu { BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial }

  SPAN.n4left { BORDER-RIGHT: #ffffff 0px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 1px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial }

  SPAN.n4right { BORDER-RIGHT: #ffffff 1px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 1px outset; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ffffff 0px outset; WIDTH: auto; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset; FONT-FAMILY: arial }

  SPAN.line { BORDER-RIGHT: #ffffff 0px outset; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 0px outset; PADDING-LEFT: 0px; PADDING-BOTTOM: 1px; MARGIN: 0px 0px 1px; BORDER-LEFT: #ffffff 0px outset; WIDTH: 20px; PADDING-TOP: 0px; BORDER-BOTTOM: #ffffff 1px outset }

  </style>

  <script language="javascript">

     

  var menuItem = new Array("Aba 1"," Aba 2");

  var currentTab = 0;

  var builder;   

   

  function build_menu() {

    var menuArea = document.getElementById('tabFolder');

    ie_menu(currentTab);

    menuArea.innerHTML = builder;   

  }

   

  function ie_menu (thismenu) {

    builder = "<table class=menu border=0 cellspacing=0 cellpadding=0><tr>";

    for (var i=0; i < menuItem.length; i++) {

      if (thismenu==i) {

      builder+="<td class=default onCLick='menu_click("+i+")' nowrap>&nbsp;"+menuItem+"&nbsp;</td>";

      }

      else {

      if (i==thismenu-1) {

        builder+=((i==0) ? "<td class=menu nowrap>":"")+"<span class=left onClick='menu_click("+i+")'>&nbsp;"+menuItem+"&nbsp;</span></td>";

      }

      else if (i==thismenu+1) {

        builder+="<td class=menu nowrap><span class=right onClick='menu_click("+i+")'>&nbsp;"+menuItem+"&nbsp;</span>"+((i==menuItem.length)?"</td>":"");

      }

      else {

        builder+=((i==0)?"<td class=menu nowrap>":"")+"<span class=menu onClick='menu_click("+i+")'>&nbsp;"+menuItem+"&nbsp;</span>"+((i==menuItem.length)?"</td>":"");

      }

    }

    }

    builder += "<td width=100% class=menu align=right>&nbsp;<font size=-1 color=#cccccc>created by allen change</font></td><tr><td colspan=4 class=outline><table class=inline width=100% height=100% bgcolor=white><tr><td>&nbsp;</td></tr></table></td></tr></tr></table>"; 

  } 

   

  function menu_click(num) {

    if (currentTab != num) {

    currentTab = num;

    build_menu();

    }

  } 

  function setup_menu(tab) {

    currentTab=tab;

    build_menu();

  }

 

  </script>

</HEAD>

<body bgcolor="#cccccc" leftmargin="30" topmargin="60" onLoad="setup_menu(0)" MS_POSITIONING="GridLayout">

  <div id="tabFolder" style="Z-INDEX:-1; LEFT:10px; POSITION:absolute; TOP:7px"><!-- tabl folder goese here -->

  </div>

  <br>

  <br>

  <br>

  <br>

  <div id="display" style="Z-INDEX:101; POSITION:absolute; HEIGHT:300px">

  <form id="Form1" method="post">

    <table cellpadding="20" ID="Table1">

    <tr>

      <td align="left" valign="middle">

      <input type="text" id="txt" NAME="txt">

      </td>

    </tr>

    </table>

  </form>

  </div>

</body>

</HTML>

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
Crystian

Crystian

Postado
Postado

para ti trocar o conteúdo do q tem dentro das tabs você precisa trocar o conteúdo do div. você vai ter que utilizar o innerHTML do div. tu vai ter que criar variaveis para guardar os valores das tabs e quando o cara clicar tu só atribui ao innerHTML do div.

Se não me engano o div que você tem q variar é esse:

<div id="display" style="Z-INDEX:101; POSITION:absolute; HEIGHT:300px">

  <form id="Form1" method="post">

    <table cellpadding="20" ID="Table1">

    <tr>

      <td align="left" valign="middle">

      <input type="text" id="txt" NAME="txt">

      </td>

    </tr>

    </table>

  </form>

  </div>

a propriedade innerHTML vai substituir a parte em vermelho pela tua variavel(com o código que você quer pra cada tab). Para utilizar o innerHTML utilize o código abaixo:

document.getElementById('display').innerHTML

Qualquer dúvida posta ae...

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites
  • 0
olimpia

olimpia

Postado
  • Autor
Postado

eu estou tendado fazer o seguinte

fiz dois div, sendo que dentro de cada div tem o conteudo que devera ser exibido para cada aba

Ai eu defini o a propriedade do div assim

<div id="display1" style="Z-INDEX: 101; VISIBILITY: hidden; POSITION: absolute; HEIGHT: 300px">

  conteudo da aba 1   

</div>

<div id="display2" style="Z-INDEX: 101; VISIBILITY: hidden; POSITION: absolute; HEIGHT: 300px">

  conteudo da aba 2   

</div>

ai quando clico na aba um fico em loop deixando todos os div com a propridedade VISIBILITY = hidden e no div correspondente da aba que foi ciclada eu deixo assim VISIBILITY = visible

faço assim

  function visible(){

    for (var i=0; i < divItem.length; i++) {

        if (i == currentDiv - 1){

      document.getElementById(divItem).style.VISIBILITY = visible;

        }

    else{

      document.getElementById(divItem).style.VISIBILITY = hidden;

    }

    }

  } 

quando if cai na linha para deixar o div visivel da certo, mas quando e para oculta-lo da o seguinte erro

JScript runtime error: 'hidden' is undefined

Como posso resolver isto?

Link para o comentário
Compartilhar em outros sites
  • 0
Crystian

Crystian

Postado
Postado

function visible(){

    for (var i=0; i < divItem.length; i++) {

        if (i == currentDiv - 1){

      document.getElementById(divItem).style.VISIBILITY = 'visible';

        }

    else{

      document.getElementById(divItem).style.VISIBILITY = 'hidden';

    }

    }

  }

Falta as aspas para atribuir o hidden e o visible....

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites
  • 0
olimpia

olimpia

Postado
  • Autor
Postado

eu coloquei em minusculo o visibility e deu certo

for (var i=0; i < divItem.length; i++) {

    if (i == currentDiv){

document.getElementById(divItem).style.visibility = 'visible';

    }

    else{

                document.getElementById(divItem).style.visibility = 'hidden';

    }

}

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...