Problema com função no menu

[Felipe Betteloni 0]

Olá pessoal,

Estou com uma dúvida que não estou conseguindo resolver :wacko:

Primeiramente eu adaptei um menu em abas, ou seja, um menu que não carregasse uma nova página e sim trocasse o conteúdo de uma div, ai eu precisava fazer um menu lateral vertical fixo na esquerda, que fizesse a mesma coisa.

Tentei adaptar o código, o menu apareceu, até funciona, mas nao 100%.. do jeito que eu quero ele ta fazendo sumir o primeiro menu que eu fiz de errado?.. podem me ajudar?

CSS:

#container{
    
    width:900px;
    height:500px; 
}
div.conteudo {

	padding:10px 15px;
	}
#cssmenu {	
  margin-top: 10px;
}
#menu {	
  height:500px;
  float:left; 	
  background: #333;
  list-style: none;
  margin: 0px 10px 0px 0px;
  padding: 0;
  width: 12em;
}
#menu li {
  font: 89.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #ccc;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#menu a:hover {
  background: #2580a2 left center no-repeat;
  color: #fff;
  padding-bottom: 8px;
}
#menu li a.corrente {
	background:#2580a2;

	}
div.aba {
	background:#fff;
	text-align:justify;
	margin-bottom:20px;
	padding:10px 15px;
	border:1px solid #666;
	}
#nav {
	margin:0;
	padding:3px 0;
	border-bottom:1px solid #778;
	font:bold 12px Georgia, "Times New Roman", Times, serif;
	}
#nav li {
	list-style:none;
	margin-right:6px;
	display:inline;
	}
#nav li a {
	padding:3px 6px;
	border:1px solid #778;
	border-bottom:none;
	background:#dde;
	color:#333;
	text-decoration:none;
	}
#nav li a:hover {
	color:#000;
	background:#aae;
	border-color:#227;
	}
#nav li a.corrente {
	background:#fff;
	border-bottom:1px solid #fff;
	}	

JavaScript do menu lateral:

$(document).ready(function(){
	$('#cssmenu').prepend(
	'<ul id="menu"><li class="corrente"><a href="#relatorios"><span>Relatórios</span></a></li><li><a href="#documentos"><span>Documentos</span></a></li><li><a href="#suporte"><span>Suporte</span></a></li><li class="last"><a href="#desconectar"><span>Desconectar</span></a></li>	</ul>')
	
		
	$('.conteudo').css({
		display: 'none',
		marginTop: 0,
		borderTopWidth: 0
		})
		
	$('#container_abas1').css('display', 'block');

	$('a', $('#menu')).click(function() {
		var i = $('a', $('#menu')).index(this) + 1;
			$(this).parents('#cssmenu').children('.conteudo:visible').hide();
			$('#container_abas' + i).show();
			$(this).parents('#menu').find('a').removeClass('corrente');
			$(this).addClass('corrente');
	})
})

JavaScript do menu em aba da div de dentro:

$(document).ready(function(){
	$('#container_abas').prepend(
	'<ul id="nav">	<li><a href="#aba1" class="corrente">2015</a></li>  <li><a href="#aba2">2014</a></li> <li><a href="#aba3">2013</a></li> <li><a href="#aba4">2012</a></li> <li><a href="#aba5">2011</a></li> </ul>')
		
	$('.aba').css({
		display: 'none',
		marginTop: 0,
		borderTopWidth: 0
		})
		
	$('#aba1').css('display', 'block');

	$('a', $('#nav')).click(function() {
		var i = $('a', $('#nav')).index(this) + 1;
			$(this).parents('#container_abas').children('.aba:visible').hide();
			$('#aba' + i).show();
			$(this).parents('#nav').find('a').removeClass('corrente');
			$(this).addClass('corrente');
	})
})

e o HTML:

<div id="container">
	<div id="cssmenu">

	<div id="container_abas1" class="conteudo">
		
		<div id="aba1" class="aba">
		<h2>2015</h2>
		<p>Janeiro</p>
		<p>Fevereiro</p>
		<p>Março</p>
		<p>Abril</p>
		<p>Maio</p>
		<p>Junho</p>
		<p>Julho</p>
		<p>Agosto</p>
		<p>Setembro</p>
		<p>Outubro</p>
		<p>Novembro</p>
		<p>Dezembro</p>
		</div>

		<div id="aba2" class="aba">
		<h2>2014</h2>
		<p>Janeiro</p>
		<p>Fevereiro</p>
		<p>Março</p>
		<p>Abril</p>
		<p>Maio</p>
		<p>Junho</p>
		<p>Julho</p>
		<p>Agosto</p>
		<p>Setembro</p>
		<p>Outubro</p>
		<p>Novembro</p>
		<p>Dezembro</p>		
		</div>
		
		<div id="aba3" class="aba">
		<h2>2013</h2>
		<p>Janeiro</p>
		<p>Fevereiro</p>
		<p>Março</p>
		<p>Abril</p>
		<p>Maio</p>
		<p>Junho</p>
		<p>Julho</p>
		<p>Agosto</p>
		<p>Setembro</p>
		<p>Outubro</p>
		<p>Novembro</p>
		<p>Dezembro</p>
		</div>

		<div id="aba4" class="aba">
	<h2>2012</h2>
		<p>Janeiro</p>
		<p>Fevereiro</p>
		<p>Março</p>
		<p>Abril</p>
		<p>Maio</p>
		<p>Junho</p>
		<p>Julho</p>
		<p>Agosto</p>
		<p>Setembro</p>
		<p>Outubro</p>
		<p>Novembro</p>
		<p>Dezembro</p>
		</div>
		
		
		
		<div id="aba5" class="aba">
		<h2>2011</h2>
		<p>Janeiro</p>
		<p>Fevereiro</p>
		<p>Março</p>
		<p>Abril</p>
		<p>Maio</p>
		<p>Junho</p>
		<p>Julho</p>
		<p>Agosto</p>
		<p>Setembro</p>
		<p>Outubro</p>
		<p>Novembro</p>
		<p>Dezembro</p>		
		</div>

</div> <!-- Fim div#container_abas -->
<div id="container_abas2" class="conteudo">
		
		<div>
		teste2
		</div>
</div>
<div id="container_abas3" class="conteudo">
		
		<div>
		teste3
		</div>
</div>
<div id="container_abas4" class="conteudo">
		
		<div>
		teste4
		</div>
</div>
</div>
</div><!-- Fim div#container -->

Help?

[wanderval 19]

bom não entendi muito bem teu problema pra mim ele está funcionando perfeitamente.

 

Mas se for sobre a lista de links de relatorio no qua se refere que é mostrado apenas a lista de 2015, o erro e que no segundo script na linha 11 você esta setando para ser exibida apenas a aba1 sendo que vc deve setar para mostrar todas abas, bom isso que entendi quando disse primeiro menu o restante parece funcional!

$('.aba').css('display', 'block');

http://jsbin.com/tedocedipe/1/edit?html,js,output