Modo listagem | Modo Linear

ruicosta

Boa tarde,

Começo por te explicar, aquilo que respondi ao teu comentário:

Maos à obra:

Adicionar à nossa página o JQUERY - Download com esta linha:

Código:

<script type="text/javascript" src="jquery-1.3.2.min.js "></script>

Desta forma, podemos utilizar esta leve e prática IDE. Passemos ao teste que ditará se está a funcionar ou não:

Código:

<html>

    <head>

        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

        <script>

            $(document).ready(function(){

                alert('está a funcionar!');

            });

        </script>

    <head>

    <body>

    </body>

</html>

Apareceu o alerta com a mensagem? Óptimo. Seguindo em frente.

Código pronto e a funcionar e comentado:

Código:

<html>

    <head>

        <script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.2.3.pack.js"></script>

        <script>

            $(document).ready(function(){

                $("li a").click(function(){ //absorve o evento CLICK da Hiperligação que esta dentro da tag LI

                    var id  = $(this).attr("id");

                    $.ajax({

                        method: "get",url: "conteudos.php",data: "pag=" + id,

                        success: function(html){ // se o houver sucesso na comunicação, o texto é guardado na variável html

                            $("#conteudo").html(html); //Coloca o conteúdo da variável no DIV com ID conteudo

                        }

                    }); 

                    return false; //Interrompe o funcionamento normal de um link, desde que o javascript esteja ligado

                    //caso contrário funciona o simples HTML

                }); 

            });

        </script>

    <head>

    <body>

        <div id="menu">

            <ul>

                <li><a href="conteudos.php?pag=1" id="1" title="Sapo">Link 1</a></li>

                <li><a href="conteudos.php?pag=2" id="2" title="Google">Link 2</a></li>

            </ul>

        </div>

        <div id="conteudo"></div>

    </body>

</html>

conteudos.php

Código:

<?php

$p = $_GET['pag'];

switch($p){

    case "1";

        echo "Link 1";

        break;

    case "2";

        echo "Link 2";

        break;

    default;

        echo "Texto por omissão";

}

?>

Qualquer dúvida ou comentário agradeço.

Abraços e beijinhos