Fala galera blz, sou novo no Fórum e tenho pouco conhecimento na área.
Estou desenvolvendo um site www.restauranteflorida.com.br/index2.html e na página inicial contém 3 divs que se alternam conforme clicado no respectivo botão. Até ai blz, o problema é que como as divs estão com display:none, não estou conseguindo fazer a primeira div (pratos do dia) já vir selecionada ao carregar a página, o mesmo com o botão.
Eu fiz com que a div carregasse com:
<script language="JavaScript">
window.location="#wall-1";
</script>
Mais além da página já carregar em cima da div, a classe do botão ativo não vem selecionada!
Segue código html:
<script>
$(document).ready(function() {
$('li').click(function() {
$('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
$(this).addClass("active"); //aqui adicionamos a class ao item clicado
});
});
</script>
<section id="img-animada">
<div class="conteudo-slider2">
<nav id="menu-slide">
<ul>
<li><a href="#wall-1">Pratos do dia</a></li>
<li><a href="#wall-2">Sobremesas</a></li>
<li><a href="#wall-3">Cardápio</a></li>
</ul>
<div class="clear"></div>
</nav>
<div class="wall wall-1" id="wall-1">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Pratos do dia <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Acompanhe as <br> opções do dia</h4>
<p>Entre e confira o prato, o risoto do dia <br> e a sugestão do Chef<p>
<button class="vermais"><a href="prato_dia.html">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_pratodia.png" alt="#"></div>
</div>
<div class="wall wall-2" id="wall-2">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Sobremesas <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Delícias <br> da Casa</h4>
<p>Entre e confira nossas sobremesas. <br> Experimente nosso campeão de pedidos há <br> mais de 10 anos: o bolo do Tio!<p>
<button class="vermais"><a href="#">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_sobremesa.png" alt="#"></div>
</div>
<div class="wall wall-3" id="wall-3">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Cardápio <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Especialidades <br> da Casa</h4>
<p>Nosso cardápio foi elaborado para agradar <br> diferentes paladares. Entre e confira!<p>
<button class="vermais"><a href="#">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_especialidades.png" alt="#"></div>
</div>
Pergunta
Leo Sales
Fala galera blz, sou novo no Fórum e tenho pouco conhecimento na área.
Estou desenvolvendo um site www.restauranteflorida.com.br/index2.html e na página inicial contém 3 divs que se alternam conforme clicado no respectivo botão. Até ai blz, o problema é que como as divs estão com display:none, não estou conseguindo fazer a primeira div (pratos do dia) já vir selecionada ao carregar a página, o mesmo com o botão.
Eu fiz com que a div carregasse com:
<script language="JavaScript">
window.location="#wall-1";
</script>
Mais além da página já carregar em cima da div, a classe do botão ativo não vem selecionada!
Segue código html:
<script>
$(document).ready(function() {
$('li').click(function() {
$('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
$(this).addClass("active"); //aqui adicionamos a class ao item clicado
});
});
</script>
<section id="img-animada">
<div class="conteudo-slider2">
<nav id="menu-slide">
<ul>
<li><a href="#wall-1">Pratos do dia</a></li>
<li><a href="#wall-2">Sobremesas</a></li>
<li><a href="#wall-3">Cardápio</a></li>
</ul>
<div class="clear"></div>
</nav>
<div class="wall wall-1" id="wall-1">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Pratos do dia <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Acompanhe as <br> opções do dia</h4>
<p>Entre e confira o prato, o risoto do dia <br> e a sugestão do Chef<p>
<button class="vermais"><a href="prato_dia.html">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_pratodia.png" alt="#"></div>
</div>
<div class="wall wall-2" id="wall-2">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Sobremesas <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Delícias <br> da Casa</h4>
<p>Entre e confira nossas sobremesas. <br> Experimente nosso campeão de pedidos há <br> mais de 10 anos: o bolo do Tio!<p>
<button class="vermais"><a href="#">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_sobremesa.png" alt="#"></div>
</div>
<div class="wall wall-3" id="wall-3">
<div class="slide-left">
<h3 class="tlt-slides-c"><img src="images/linha_slides.png" alt="#"> Cardápio <img src="images/linha_slides2.png" alt="#"></h3>
<h4 class="tlt-slides-v">Especialidades <br> da Casa</h4>
<p>Nosso cardápio foi elaborado para agradar <br> diferentes paladares. Entre e confira!<p>
<button class="vermais"><a href="#">Veja mais</a></button>
</div>
<div class="slide_right"><img src="images/foto_especialidades.png" alt="#"></div>
</div>
<div id="next-prev">
<a href="#" id="prev"><img src="images/seta-left.png"></a>
<a href="#" id="next"><img src="images/seta-right.png"></a>
</div>
<div class="clear"></div>
</div>
</section>
-----------------------------------------------------------------------------------
CSS:
nav#menu-slide ul{
list-style:none;
}
nav#menu-slide ul li{
float:left;
margin:0px 20px;
}
nav#menu-slide ul li a{
width:95px;
height:32px;
display:block;
background:url(../images/back_menu_cinza.png) no-repeat;
color:#fff;
text-decoration:none;
text-align:center;
padding:5px 0px;
font-family:"Maven Pro Light 300";
font-size: 11pt;
}
nav#menu-slide ul li a:hover{
background:url(../images/back_menu.png) no-repeat;
}
nav#menu-slide ul li.active a{
background:url(../images/back_menu.png) no-repeat;
}
.wall{
display: none;
width: 700px;
margin:auto;
margin-top:30px;
}
.wall:target{
display: block;
}
Desde já agradeço e fiquem a vontade para dicas ou críticas para que melhore meu código!
Abraços
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
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.