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

AJUDA COM SCRIPT


Leo Sales

Pergunta

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

slide.jpg

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

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.



  • Estatísticas dos Fóruns

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