(SOPT) 37603

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

<body>

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn disabled btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">Project name</a>
                <div id="nav-main" class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a class="tc" href="#home" data-url="tt.php" data-info="GET">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle " data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="index2.php">Action</a></li>
                                <li><a href="index.php">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#produto/2/3/5">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container">
        <div id="conteudo">
            /carrega as informaçoes
        </div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        // faz load via url
        var hash = window.location.hash;
        var hashman = $(".tc[href='"+hash+"']").attr("data-url");
        var hashman_tipo = $(".tc[href='"+hash+"']").attr("data-info");

        if (typeof hashman !== "undefined") {
            loading(1);
            navegacao(hashman,hashman_tipo);
        }else {
            loading(1);
            navegacao("tt.php","GET");
        }
        // faz load via link
        $(".tc").click(function(){

            $("#conteudo").fadeOut('slow',function(){
                loading(1);
                var link = $(this).attr("data-url");
                var tipo = $(this).attr("data-info");
                navegacao(link,tipo);
            });

        });

        function navegacao(link,tipo){
            $.ajax({
                url : link,
                dataType : "HTML", // Pode ser SCRIPT se o retorno for somente comandos JavaScript
                type : tipo, // Pode ser get ou post..
                success : function(conteudo){
                    log(conteudo)
                    $("#conteudo").html(conteudo).fadeIn('slow');
                },
                error : function(a,b,c){
                    alert("Erro : "+a["status"]+" "+c);
                }
            });
        }

        function loading(status) {
            if ( status == 1 )
            $('#conteudo').html("<div id='loading'><br><br><center><img src='http://i.stack.imgur.com/drgpu.gif' border='0' /></center></div>");
            else
            $('#loading').fadeOut();
        }


    });


    </script>
</body>
</html>