Ajudinha com JavaScript: manter abas "ativas"

Assuntos Gerais
#1

[b]Olá, colegas!! :smiley:

Estou precisando de umas dicas em JavaScript… seguinte:
tenho uma pagina com abas que são trocadas sem precisar recarregar toda a pagina, dada pelo seguinte codigo:
[/b]

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
		
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}




// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

o problema eh que a aba “ativa” nao troca a imagem como fica quando o mouse esta em cima (hover) e, pelo que imaginei, deveria ficar, veja o css:

div.TabView div.Tabs a:hover,
div.TabView div.Tabs a.active
{
  background: url('_images/botaoOn.jpg') no-repeat;
}

[b]essa imagem a aparece como hover, mas não quando a aba está ativa…

como poderia consertar isso??[/b] :?: :?:

#2

Uma sugestão, minha querida: http://www.jackslocum.com/

Dê uma olhada nos componentes que ele criou (http://www.yui-ext.com/deploy/yui-ext/docs/) que lá tem um componente d abas muito legal. :slight_smile:

#3

obrigada, eh realmente interessante.

mas ainda queria tentar consertar esse, porque sei aque atende bem ao que to fazendo…:slight_smile:

#4

Veja se esse exemplo ajuda:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
 function amplia(estado,tipo) {
   document.getElementById(estado).style.fontSize = (tipo == 1 ? 20 : 10);
   document.getElementById(estado).style.cursor = (tipo == 1 ? "hand" : "default");
 }
 
 //-->
 </SCRIPT>
 </HEAD>
 <BODY >
 <FORM METHOD=POST ACTION="">
 <div style="width=113;height=113;background-color:FFFFFF;background-image:url('D:\juliano\fotos\outras\atencao.gif')">
 <span style="display:'';font-size:10" id="Amapa" onMouseOver="amplia('Amapa',1)" onMouseOut="amplia('Amapa',0)" onClick="alert('a')">sssssssssss</span>
 <br>
 <span style="display:'';font-size:10" id="SaoPaulo" onMouseOver="amplia('SaoPaulo',1)" onMouseOut="amplia('SaoPaulo',0)" onClick="alert('b')">sssssssssss</span>
 </div>
 </FORM>
 </BODY>
 </HTML>
#5

Ali no css, mais especificamente aqui…

div.TabView div.Tabs a.active

Não seria na verdade assim?

div.TabView div.Tabs a:active

Não tenho certeza mas deve ser isso… ou então você deve adicionar essa classe na sua tab selecionada, isso eu procurei e não vi você fazendo no javascript…

Espero que ajude… até +

#6

[quote=dudaskank]Ali no css, mais especificamente aqui…

div.TabView div.Tabs a.active

Não seria na verdade assim?

div.TabView div.Tabs a:active

[/quote]O problema até tá ai sim, mas creio que seja porque lá no javascript vc definiu a classe da aba ativa como sendo ‘Active’ e no css você colocou ‘active’. Como CSS é case sensitive…

#7

nao, nao… nenhum dos dois consertos resolveu…

#8