Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lukoBR

[Resolvido] Problema com colspan

Recommended Posts

Bom, estou com um problema com colspan + javascript:

 

Ao clicar no sexo (Masculino ou Feminino) exibe as TABS correspondente ao sexo. Funciona ok no IE8, mas no OPERA e no MOZILLA (e possivelmente outros brownsers) não funciona como esperado. Ao clicar, aparece as TABS só que em apenas um lado, fazendo que o conteudo fico errado. Para entender veja as imagens:

 

OPERA

Imagem Postada

 

MOZILLA

Imagem Postada

 

IE8

Imagem Postada

 

 

E o código que utilizo:

 

Javascript:

function verifica() {

if(document.getElementById("man").checked)
	{
		document.getElementById('formanstyle').style.display = 'block'
		document.getElementById('forwomanstyle').style.display = 'none'
    }
else
	{
		document.getElementById('formanstyle').style.display = 'none'
		document.getElementById('forwomanstyle').style.display = 'block'
	}
}

HTML (apenas a parte das TABS e do sexo)

<tr>
    <td>Sexo</td>
    <td><input type="radio" name="---" id="man" value="man" checked="checked" onClick="verifica()"/> Masculino<br />
        <input type="radio" name="---" id="woman" value="woman" onClick="verifica()"/> Feminino</td>
  </tr>
  <tr>
    <td>Status</td>
    <td><input name='stats' type='text' disabled='disabled' id='stats' value='FREE (R$0.00)' readonly='readonly'/></td>
  </tr>
  
  <tr id="formanstyle" style="display:none">
	<td colspan="2">

<div id="manmenu" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="../jogos/img/character/objects/head/head1.png" border="0" /></li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">MASCU 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    <div class="TabbedPanelsContent">Content 3</div>
  </div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("manmenu");
//-->
</script>

	</td>
  </tr>

  <tr id="forwomanstyle" style="display:none">
	<td colspan="2">

<div id="womanmenu" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="http://static.wowhead.com/images/icons/large/inv_helmet_20.jpg" border="0" /></li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="../jogos/img/character/objects/head/head1.png" border="0" /></li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">FEMININOCU 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    <div class="TabbedPanelsContent">Content 3</div>
  </div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("womanmenu");
//-->
</script>

	</td>
  </tr>

Agradeço e espero ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO

 

Simplesmente devo trocar os

document.getElementById('formanstyle').style.display = "block";

por

document.getElementById('formanstyle').style.display = "";

Valeu

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.