PHP cambio contenuto

franciccio

Nuovo Utente
10 Apr 2017
18
0
1
42
Buongiorno a tutti,
vorrei creare una pagina php in cui il codice html(il menù a tendina per cambiare il contenuto) vada a richiamare dei file html che contengono solo il contenuto da visualizzare che sarà diverso.
Es. index.php avrà tutto il codice compreso un testo al centro <body>.
Vorrei che scegliendo dal menù a tendina, ci sia un collegamento ipertestuale che vada a richiamare il diverso body quindi senza ricaricare la pagina ma cambiando solo il contenuto.
Sapete aiutarmi?
Grazie
 
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <LINK REL="SHORTCUT ICON" HREF= "img/logo.png">
    <title>Avis Donatori Sangue - Locate di Triulzi</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mycss.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="col-md-9">
   <ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Cos'è Avis</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
      Chi Siamo <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#siamo1" data-toggle="tab">Identità</a></li>
      <li class="divider"></li>
      <li><a href="#siamo2" data-toggle="tab">Organigramma</a></li>
      <li class="divider"></li>
      <li><a href="#siamo3" data-toggle="tab">Statuto e Regolamento</a></li>
    </ul>
  </li>
  <li class="dropdown">
    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
      Donazione <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#donazione1" data-toggle="tab">Il Sangue</a></li>
      <li class="divider"></li>
      <li><a href="#donazione2" data-toggle="tab">Perchè Donare</a></li>
      <li class="divider"></li>
      <li><a href="#donazione3" data-toggle="tab">Chi può Donare</a></li>
      <li class="divider"></li>
      <li><a href="#donazione4" data-toggle="tab">Come Donare</a></li>
      <li class="divider"></li>
      <li><a href="#donazione5" data-toggle="tab">Tipi di Donazione</a></li>
    </ul>
  </li>
  <li><a href="#dove" data-toggle="tab">Dove Trovarci</a></li>
  <li><a href="#contattaci" data-toggle="tab">Contattaci</a></li>
<div>
    <body>
</div>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active in" id="home">
    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
  </div>
  <div class="tab-pane fade" id="contattaci">
   <!---------->
<form class="form-horizontal">
  <fieldset>
    <legend>Contattaci</legend>
    <div class="form-group">
      <label class="col-lg-2 control-label" for="inputEmail">Nome</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" type="text" placeholder="Nome">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-2 control-label" for="inputEmail">Cognome</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" type="text" placeholder="Cognome">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-2 control-label" for="inputEmail">Email</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputEmail" type="text" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-2 control-label" for="textArea">Textarea</label>
      <div class="col-lg-10">
        <textarea class="form-control" id="textArea" rows="3"></textarea>
      </div>
    </div>
    <div class="form-group">
      <div class="col-lg-10 col-lg-offset-2">
        <button class="btn btn-default" type="reset">Cancel</button>
        <button class="btn btn-primary" type="submit">Submit</button>
      </div>
    </div>
  </fieldset>
</form>
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/app.js"/></script>    
        <script>
            $("document").ready(function(){
                var keys = getKeys();
                var strIndirizzo = "https://maps.googleapis.com/maps/api/js?key="+keys.getGoogle()+"&callback=inizializzaMappa"
                console.log(strIndirizzo);
                var googleScript = document.createElement('script');
                googleScript.setAttribute('src',strIndirizzo);
                document.head.appendChild(googleScript);
                console.log(keys.getGoogle());
                // VisualizzaSanti(keys.getOpenSanti());
                var Ultima_localita = localStorage.Ultima_localita;
                var Ora_apertura = localStorage.Ora_apertura;
                var Meteo = localStorage.Meteo;
                var ultimo = sessionStorage.chiudi;
                // $("#storico").text(Ultima_localita);
                // $("#ultimoaccesso").text(Ora_apertura);
                console.log(Ultima_localita);
                console.log(Ora_apertura);
                console.log(Meteo);
                console.log("ultimo=" + ultimo);
            });
            function inizializzaMappa(){
                if(navigator && navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(
                        function(data){       
                            var coords = {
                                lat: 0,
                                lng: 0,
                                acc: 0,
                                indirizzo: ""
                            };
                            coords.lat = 45.355004;
                            coords.lng = 9.222098;
                            coords.acc = data.coords.accuracy;
                            console.log(coords);
                            var centro = {lat: coords.lat, lng: coords.lng};
                            var map = new google.maps.Map(document.getElementById('map'), {
                                mapTypeId: google.maps.MapTypeId.HYBRID,
                                zoom: 16,
                                center: centro
                            });
                            var marker = new google.maps.Marker({
                                position: centro,
                                map: map
                            });
                            $("#acc").text(coords.acc);
                            var geocoder = new google.maps.Geocoder;
                            geocoder.geocode({'location':centro}, function(results,status){
                                console.log(status);
                                if(status=="OK" && results && results.length>0){
                                    coords.indirizzo = results[0].formatted_address;
                                    console.log(coords.indirizzo);
                                    $("#indirizzo").text(coords.indirizzo);
                                    $("#accDisplay").css("display","inline");
                                }
                            })
                        },
                        function(error){
                            alert("ERRORE: "+error.message);
                        });
                }
            }
        </script>
        <script>
            function apri(url) {
                newin = window.open(url,'titolo','scrollbars=no,resizable=yes, width=700,height=500,status=no,location=no,toolbar=no,position=center');
            }
        </script>
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "connect.facebook.net/it_IT/sdk.js#xfbml=1&version=v2.8";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
 
Ultima modifica di un moderatore:
Potresti farlo attraverso $_GET. A secondo del valore assunto da un certo parametro mostri la pagina che ti serve.


Riesci a farmi un esempio di implementazione? da basso vedi il codice, il menù a tendina come lo gestisco? dove c'è il tag body voglio inserire il diverso contenuto
 
ciao
quando posti del codice racchiudili negli appositi bccode (inesisci codice e tipo quartultima iconcina nella barra formattazione del post) e non sbodolarlo tutto con inutili righe vuote
 

Discussioni simili