Ir para conteúdo

POWERED BY:

Arquivado

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

danisark

carregando pagina sem refresh.

Por , em Javascript

Recommended Posts

danisark    0

danisark
Postado

Seguinte eu tenho um site e eu conssegui fazer por ajax o conteudo da pagina mudar em uma div o codigo da pagina está assim

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
       <title>Chow</title>
       <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster" />
       <link rel="stylesheet" href="style.css" type="text/css" />
       <style type="text/css">
   body{ background:#ECE9DC url(images/bg-page.jpg) repeat-x top center; color: #6b6c6e;font: 14px/22px "Helvetica", Arial, sans-serif;}
   #logo { width:290px; height:120px; float:left; padding-top:30px;background: url(images/logo.png) no-repeat;text-indent:-9999px;clear:both;}
   .divider {background:url(images/divider.png) repeat-x; height:86px;width:100%;position:absolute; top:109px;z-index:-200;}
   #slider h2 {color: }
   #footer {background:#2e2e2e url(images/tan/footer-bg.png) no-repeat top; height:300px;margin-top:40px;padding:25px;color:#FFF; }
   .nivo-caption p {color: }
   #menu-contents li .heading {float:left;background:#ECE9DC;padding: 0 4px 0 0;color: #2E2A2B;font-family: 'Bebas',Arial,sans-serif; font-size:17px;text-transform: uppercase;word-spacing: 3px;text-shadow: 0px 2px 1px #FFFFFF;}
   #menu-contents li a {float:right;background:#ECE9DC url(images/view-button.png) no-repeat;  text-indent:-9999px;width:54px;height:29px;border:0;padding: 0 0 0 4px;position:relative; top:-5px;}
.content .col.huge #iframe {
height: 500px;
}
       </style>
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-style.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type='text/javascript' src='scripts/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='scripts/jquery.easing.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/fancybox/jquery.fancybox-1.3.4.pack.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/ui.core.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/ui.tabs.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/jquery.nivo.slider.pack.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/jcarousellite.js?ver=3.0.4'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
       <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

       <script type="text/javascript">
               $(document).ready(function() {
                       //função que será chamada quando o link do menu for clicado
                       $("#menu a").click(function(event) {
                        //evitando a ação default
                               event.preventDefault();
                        //carregando a url que está no href do link na div conteudo
                               $("#conteudo").load($(this).attr("href"));
                       });
               });
       </script>
   </head>
   <body>
       <div class="divider"> </div>
       <div class="content">
           <!-- Header content -->
           <div  id="header" >
               <div class="header-logo">
                   <a id="logo" href="index.html">Chow</a>
                   <p></p>                </div>
               <div id="menu-top" class="menu-main-container"><ul id="menu-main" class="menu">
               <li id="menu-item-10" class="menu-item menu-item-type-post_type"><a href="index.html"><strong>Home</strong></a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home"><a href="other.html"><strong>Cardápio</strong></a>
</li>
<li id="menu-item-159" class="menu-item menu-item-type-post_type"><a href="promocoes.html"><strong>Promoções</strong></a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type"><a href="delivery.html"><strong>Delivery</strong></a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type"><a href="blog.html"><strong>Eventos</strong></a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type"><a href="gallery.html"><strong>Fotos</strong></a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type"><a href="contact.html"><strong>Contato</strong></a></li>
</ul></div>            </div>
           <div class="clear"></div>
           <!-- End of header content --><!-- Slider -->
<div class="col huge">
<div id="conteudo">
<img src="images/content/menu.jpg" />
</div>
   </div>
<!-- End of main content -->

<!-- Sidebar -->
<div class="col last">
<!-- Load default sidebar items -->

<ul class="side-menu">
<div id="menu">
       <li><a href="cardapio/bebidas.html">BEBIDAS</a></li>
       <li><a href="cardapio/lanches.html">LANCHES</a></li>
   	<li><a href="cardapio/pizzas.html">PIZZAS</a></li>
       <li><a href="cardapio/alacarte.html">À LACARTE</a></li>
       <li><a href="cardapio/selfservice.html">SELF-SERVICE</a></li>
       <li><a href="cardapio/sobremesas.html">SOBREMESAS</a></li>
       <li><a href="cardapio/sorvetes.html">SORVETES</a></li>
</div>   
   </ul>

<div id="conteudo2"><h2>Announcement</h2>			<div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="images/silverware.png" alt="silverware"></div></div>
	</div>
<!-- End of sidebar -->
<div class="clear"></div>
</div>
<script type="text/javascript">
   $j = jQuery.noConflict();

   $j('.side-menu > li > a').mouseover(function(){
       $j(this).animate({paddingLeft : '10px'}, 200);
   }).mouseout(function(){
       $j(this).animate({paddingLeft : '0px'}, 200);
   });

   $j('.search-text').focus(function(){
       if($j(this).val() == "Search Menu")
       {
           $j(this).val('');
       }
   }).blur(function(){
       if($j(this).val() == '')
       {
           $j(this).val("Search Menu");
       }
   });
</script>
<!-- End of scripts -->
<!-- Footer -->
<script type="text/javascript">
   $j = jQuery.noConflict();
   // Method for the animation of the sub-menu
   $j(function() {
       $j("#menu-top ul.menu ul").css({ display: 'none' });
       $j("#menu-top ul.menu li").hover(function() {
           $j(this).find('ul.sub-menu')
           .stop(true, true).delay(50).animate({ "height": "show"}, 200 );
       }, function(){
           $j(this).find('ul.sub-menu')
           .stop(true, true).delay(50).animate({ "height": "hide" }, 200 );
       });
   });
</script>
<div id="footer">
   <div class="content">
       <div class="col medium">
           <h2 class="footer-comments">Recent blog Comments</h2>
        <ul class="comment-list">
<li>“ A picture is worth a thousand words. An interface is worth a thousand pictures.  ”<br /.<a href="#" title="on Friday night fun night">Ben Shneiderman- on 1/27/11</a></li>
<li>“ Em volum diam irilla consequat aut dunt non ulput dunt lor sustrud tio dunt alit wis et vercing eugiat voleseq ... ”<br /.<a href="#" title="on Friday night fun night">Test guy- on 1/25/11</a></li>
</ul>        </div>
       <div class="col">
           <h2 class="footer-social">Social Sites</h2>
           <ul>
                               <li class="list-image facebook"><a href="">Facebook</a></li>
               <li class="list-image twitter"><a href="http://twitter.com/">Twitter</a></li>
               <li class="list-image rss"><a href="#">Specials RSS</a></li>
           </ul>
       </div>
       <div class="col">
           <h2 class="footer-directions">Directions</h2>
           <p>
               From the North: Take I-275 west. Exit 23 mile road and turn right on Spring Blvd. Take first right.                <a class="view-button" href="#">View page </a>
           </p>
       </div>
       <div class="col last">
           <h2 class="footer-hours">Hours</h2>
           <ul>
<li>Monday - Thursday: <br />8AM - 10PM</li>
<li>Friday: 8AM - 12PM</li>
<li>Saturday: 11AM - 1AM</li>
<li>Sunday: 12PM - 7PM</li>
</ul>        </div>
       <div class="clear"> </div>

</div>
<!-- End of footer -->
</body>
</html>

online: www.grammax.com.br/teste/other.html

 

está funcionando corretamente, é só clicar em bebidas por exemplo que o site nao vai atualizar a pagina inteira, ele só vai mudar o ocnteudo porém eu gostaria de fazer isso também com essa div

<div id="conteudo2"><h2>Announcement</h2>
   <div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="images/silverware.png" alt="silverware">
   </div>
</div>

alguma ideia de como conssigo fazer isso?

Obrigado pela ajuda ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é a mesma coisa..

 

assim, qndo você pegar um código pronto, entenda ele..

 

esse aqui:

        <script type="text/javascript">
               $(document).ready(function() {
                       //função que será chamada quando o link do menu for clicado
                       $("#menu a").click(function(event) {
                        //evitando a ação default
                               event.preventDefault();
                        //carregando a url que está no href do link na div conteudo
                               $("#conteudo").load($(this).attr("href"));
                       });
               });
       </script>

é o trecho q faz o ajax para o #menu

 

 

se você quiser que o #nav, carregue no conteudo 2, basta fazer:

        <script type="text/javascript">
               $(document).ready(function() {
                       $("#menu a").click(function(event) {
                               event.preventDefault();
                               $("#conteudo").load($(this).attr("href"));
                       });
                       $("#nav a").click(function(event) {
                               event.preventDefault();
                               $("#conteudo2").load($(this).attr("href"));
                       });
               });
       </script>

entendeu ?

 

 

estude javascript básico.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danisark    0

danisark
Postado

ok isso eu entendi... mas como ficara a pgian html no caso a do bebidas1 está assim quadoela carrega no conteudo.

<head>
       <script type="text/javascript">
               $(document).ready(function() {
                       //função que será chamada quando o link do menu for clicado
                       $("#menu a").click(function(event) {
                        //evitando a ação default
                               event.preventDefault();
                        //carregando a url que está no href do link na div conteudo
                               $("#conteudo").load($(this).attr("href"));
                       });
               });
       </script>
                 <script type="text/javascript">
               $(document).ready(function() {
                       $("#menu a").click(function(event) {
                               event.preventDefault();
                               $("#conteudo").load($(this).attr("href"));
                       });
                       $("#nav a").click(function(event) {
                               event.preventDefault();
                               $("#conteudo2").load($(this).attr("href"));
                       });
               });
       </script>
</head>
<h1>Bebidas </h1><p>
              </p>
<ul id="menu-contents"><h2>Bebidas - Coquetéis</h2><br /> <li>

           <span class="heading">Alexander </span><br />
           <p> (Conhaque, Licor de Cacau e Creme de Leite)
       </li>
           <li>
           <span class="heading">Italian Baked Pasta,</span><br />
           <p> (Rum, Creme de Leite, Suco de Abacaxi)</p>
       </li>
           <li>
           <span class="heading">Margarita</span><br />
           <p> (Tequila, Suco de Morango ou Limão, Cointreau)</p>
       </li>
           <li>
           <span class="heading">Cuba Libre</span><br />
           <p> (Rum, Limão, Gelo e Coca-Cola)</p>
       </li>
       <h2>Alcoólicas</h2><br />
     <p>
    </p>
           <li>
           <span class="heading">Tequila Jose Cuervo (Ouro e Prata) </span><br />
           <p> (Ouro e Prata) </p>
       </li>
           <li>
           <span class="heading">Steinhaeger</span><br />
       </li>
        <li>
           <span class="heading">Vodka Smirnoff</span><br />
       </li>
        <li>
           <span class="heading">Martini</span><br />
       </li>
        <li>
           <span class="heading">Conhaque Domeck </span><br />
       </li>
       <li>
           <span class="heading">Campari </span><br />
       </li>
       <li>
           <span class="heading">Run Bacardi </span><br />
       </li>
       <li>
           <span class="heading">St Remy  </span><br />
       </li>
       <h2>Bebidas - Cachaças</h2><br />
        <li>
           <span class="heading">Sagatiba</span><br />
       </li>
        <li>
           <span class="heading">Sabor de Minas</span><br />
       </li>
       <li>
           <span class="heading">Sao Franscisco</span><br />
       </li>
       <li>
           <span class="heading">Ypioca </span><br />
       </li>
       <li>
           <span class="heading">Alambique – Da Casa</span><br />
       </li>

       <div id="menu"><a class="view-button" href="cardapio/bebidas2.html">mais</a></div>
</ul>
   </p>
   </p>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ta errado.. além disso, você duplicou o script do #menu a

 

a página q vai ser carregada, não deve ter nenhuma tag <script>

 

para você carregar 2 areas diferentes com o mesmo link, você precisa ou mandar 2 requisições para arquivos diferentes, ou trazer a resposta e parsear ela, com a função $() do jQuery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

será o mesmo disparador ?

 

ou serão 2 disparadores diferentes ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

ok.

 

$("#menu a").click(function(event){
        event.preventDefault();
        var href = $(this).attr("href");
        $("#conteudo").load( href );


        if( href=='bebidas.html')
            $("#conteudo2").load( 'outroarquivo_bebidas.html' );
});

entendeu ?

 

só fica "meio feio" assim.. por isso que deixei como segunda sugestão, fazer um parser do HTML com a função $().

Outra opção, mais robusta, seria trabalhar com jSON.. mas acredito que no teu caso, não valha a pena.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danisark    0

danisark
Postado

ok entendi, mas mesmo assim... ai ele tá carregando uma pagina fixa certo? por exemplo eu quero o conteudo2 mude dependendo do conteudo, por exemplo cliquei em bebidas, o conteudo2 vai carregar uma pagina html com uma foto de bebiba, se eu cliquei em sei lá refeições ele muda pra outra pagina html, não quero que ele mude para uma pagina fixa como 'outroarquivo+bebbidas.html' posso te me equivocado, caso isso tenha acontecido me desculpe sou leigo em javascript.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

no caso desse exemplo que postei, você precisaria colocar um IF para cada página sua.

 

Para q cada página, disparasse o segundo request, para carregar o conteudo2.

 

 

Faça com o parser do $(), conforme indiquei, assim você não precisa do IF.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danisark    0

danisark
Postado

Eu fiz o negocio do if

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
       <title>Chow</title>
       <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster" />
       <link rel="stylesheet" href="style.css" type="text/css" />
       <style type="text/css">
   body{ background:#ECE9DC url(images/bg-page.jpg) repeat-x top center; color: #6b6c6e;font: 14px/22px "Helvetica", Arial, sans-serif;}
   #logo { width:290px; height:120px; float:left; padding-top:30px;background: url(images/logo.png) no-repeat;text-indent:-9999px;clear:both;}
   .divider {background:url(images/divider.png) repeat-x; height:86px;width:100%;position:absolute; top:109px;z-index:-200;}
   #slider h2 {color: }
   #footer {background:#2e2e2e url(images/tan/footer-bg.png) no-repeat top; height:300px;margin-top:40px;padding:25px;color:#FFF; }
   .nivo-caption p {color: }
   #menu-contents li .heading {float:left;background:#ECE9DC;padding: 0 4px 0 0;color: #2E2A2B;font-family: 'Bebas',Arial,sans-serif; font-size:17px;text-transform: uppercase;word-spacing: 3px;text-shadow: 0px 2px 1px #FFFFFF;}
   #menu-contents li a {float:right;background:#ECE9DC url(images/view-button.png) no-repeat;  text-indent:-9999px;width:54px;height:29px;border:0;padding: 0 0 0 4px;position:relative; top:-5px;}
.content .col.huge #iframe {
height: 500px;
}
       </style>
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-style.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="scripts/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type='text/javascript' src='scripts/jquery.js?ver=1.4.2'></script>
<script type='text/javascript' src='scripts/jquery.easing.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/fancybox/jquery.fancybox-1.3.4.pack.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/ui.core.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/ui.tabs.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/jquery.nivo.slider.pack.js?ver=3.0.4'></script>
<script type='text/javascript' src='scripts/jcarousellite.js?ver=3.0.4'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
       <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

       <script type="text/javascript">
               $(document).ready(function() {
                       //função que será chamada quando o link do menu for clicado
                       $("#menu a").click(function(event) {
                        //evitando a ação default
                               event.preventDefault();
                        //carregando a url que está no href do link na div conteudo
                               $("#conteudo").load($(this).attr("href"));
                       });
               });
       </script>
         <script type="text/javascript">
$("#menu a").click(function(event){
        event.preventDefault();
        var href = $(this).attr("href");
        $("#conteudo").load( href );


        if( href=='bebidas.html')
        	$("#conteudo2").load( 'cardapio/bebidas_1c2.html' );
	if( href=='bebidas2.html')
            $("#conteudo2").load( 'cardapio/bebidas_2c2_bebidas.html' );
		 if( href=='bebidas3.html')
            $("#conteudo2").load( 'cardapio/bebidas_3c2_bebidas.html' );
		 if( href=='bebidas4.html')
            $("#conteudo2").load( 'cardapio/bebidas_4c2_bebidas.html' );
		 if( href=='bebidas.html')
            $("#conteudo2").load( 'cardapio/lanches_1c2_bebidas.html' );
});
       </script>
   </head>
   <body>
       <div class="divider"> </div>
       <div class="content">
           <!-- Header content -->
           <div  id="header" >
               <div class="header-logo">
                   <a id="logo" href="index.html">Chow</a>
                   <p></p>                </div>
               <div id="menu-top" class="menu-main-container"><ul id="menu-main" class="menu">
               <li id="menu-item-10" class="menu-item menu-item-type-post_type"><a href="index.html"><strong>Home</strong></a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home"><a href="other.html"><strong>Cardápio</strong></a>
</li>
<li id="menu-item-159" class="menu-item menu-item-type-post_type"><a href="promocoes.html"><strong>Promoções</strong></a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type"><a href="delivery.html"><strong>Delivery</strong></a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type"><a href="blog.html"><strong>Eventos</strong></a></li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type"><a href="gallery.html"><strong>Fotos</strong></a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type"><a href="contact.html"><strong>Contato</strong></a></li>
</ul></div>            </div>
           <div class="clear"></div>
           <!-- End of header content --><!-- Slider -->
<div class="col huge">
<div id="conteudo">
<img src="images/content/menu.jpg" />
</div>
   </div>
<!-- End of main content -->

<!-- Sidebar -->
<div class="col last">
<!-- Load default sidebar items -->

<ul class="side-menu">
<div id="menu">
       <li><a href="cardapio/bebidas.html">BEBIDAS</a></li>
       <li><a href="cardapio/lanches.html">LANCHES</a></li>
   	<li><a href="cardapio/pizzas.html">PIZZAS</a></li>
       <li><a href="cardapio/alacarte.html">À LACARTE</a></li>
       <li><a href="cardapio/selfservice.html">SELF-SERVICE</a></li>
       <li><a href="cardapio/sobremesas.html">SOBREMESAS</a></li>
       <li><a href="cardapio/sorvetes.html">SORVETES</a></li>
</div>   
   </ul>

<div id="conteudo2"><h2>Announcement</h2>			<div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<img src="images/silverware.png" alt="silverware"></div></div>
	</div>
<!-- End of sidebar -->
<div class="clear"></div>
</div>
<script type="text/javascript">
   $j = jQuery.noConflict();

   $j('.side-menu > li > a').mouseover(function(){
       $j(this).animate({paddingLeft : '10px'}, 200);
   }).mouseout(function(){
       $j(this).animate({paddingLeft : '0px'}, 200);
   });

   $j('.search-text').focus(function(){
       if($j(this).val() == "Search Menu")
       {
           $j(this).val('');
       }
   }).blur(function(){
       if($j(this).val() == '')
       {
           $j(this).val("Search Menu");
       }
   });
</script>
<!-- End of scripts -->
<!-- Footer -->
<script type="text/javascript">
   $j = jQuery.noConflict();
   // Method for the animation of the sub-menu
   $j(function() {
       $j("#menu-top ul.menu ul").css({ display: 'none' });
       $j("#menu-top ul.menu li").hover(function() {
           $j(this).find('ul.sub-menu')
           .stop(true, true).delay(50).animate({ "height": "show"}, 200 );
       }, function(){
           $j(this).find('ul.sub-menu')
           .stop(true, true).delay(50).animate({ "height": "hide" }, 200 );
       });
   });
</script>
<div id="footer">
 <div class="content">
   <div class="col medium">
     <h2 class="footer-comments">NOVIDADES</h2>
     <ul class="comment-list">
       <li>“ A picture is worth a thousand words. An interface is worth a thousand pictures.  ”<br /.<a href="#" title="on Friday night fun night">Ben Shneiderman- on 1/27/11</a></li>
       <li>“ Em volum diam irilla consequat aut dunt non ulput dunt lor sustrud tio dunt alit wis et vercing eugiat voleseq ... ”<br /.<a href="#" title="on Friday night fun night">Test guy- on 1/25/11</a></li>
     </ul>
   </div>
   <div class="col">
     <h2 class="footer-social">rEDES sOCIAIS</h2>
     <ul>
       <li class="list-image facebook"><a href="">Facebook</a></li>
       <li class="list-image twitter"><a href="http://twitter.com/">Twitter</a></li>
     </ul>
   </div>
   <div class="col">
     <h2 class="footer-directions">ENDERECO</h2>
     <p> From the North: Take I-275 west. Exit 23 mile road and turn right on Spring Blvd. Take first right. <a class="view-button" href="#">View page </a> </p>
   </div>
   <div class="col last">
     <h2 class="footer-hours">FUNCIONAMENTO</h2>
     <ul>
       <li>Monday - Thursday: <br />
         8AM - 10PM</li>
       <li>Friday: 8AM - 12PM</li>
       <li>Saturday: 11AM - 1AM</li>
       <li>Sunday: 12PM - 7PM</li>
     </ul>
   </div>
   <div class="clear"> </div>
   <div class="footer-info"> Site desenvolvido pela <br />
     <a href="http://www.microcenterinformatica.com.br">@MicroCenter Informática</a></div>
 </div>
</div>
<!-- End of footer -->
</body>
</html>

Mas não funcionou infelizmente... quando clico no bebidas, ele não muda o conteudo2

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

coloque assim:

 

$("#conteudo").load( href );
alert( href );

clique no bebidas, e diga oq retornar.

 

provavelmente, o seu if teria q estar assim:

 

if( href=='cardapio/bebidas.html' )

Compartilhar este post

Link para o post
Compartilhar em outros sites

danisark    0

danisark
Postado

coloquei mas mesmo assim nao funcionou =(

          <script type="text/javascript">
$("#menu a").click(function(event){
        event.preventDefault();
        var href = $(this).attr("href");
        $("#conteudo").load( href );
alert( href );


        if( href=='cardapio/bebidas.html')
        	$("#conteudo2").load( 'cardapio/bebidas_1c2.html' );
	if( href=='bebidas2.html')
            $("#conteudo2").load( 'cardapio/bebidas_2c2_bebidas.html' );
		 if( href=='bebidas3.html')
            $("#conteudo2").load( 'cardapio/bebidas_3c2_bebidas.html' );
		 if( href=='bebidas4.html')
            $("#conteudo2").load( 'cardapio/bebidas_4c2_bebidas.html' );
		 if( href=='bebidas.html')
            $("#conteudo2").load( 'cardapio/lanches_1c2_bebidas.html' );
});
       </script>

Desculpe sei que sou muito leigo no assunto, mas agradeço imensamente pela ajuda...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

vai ser necessário debugar.

 

js:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

 

 

ajax:

http://wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito