/ / Come possiamo modificare solo la parte interna di una pagina Web? - javascript, jquery, html, html5

Come possiamo cambiare solo la parte interna di una pagina web? - javascript, jquery, html, html5

Sto sviluppando un'applicazione web, in cui le intestazionie i piè di pagina per tutte le pagine sono uguali. Quello che voglio ottenere è quello di modificare solo la parte della pagina tra l'intestazione e il piè di pagina quando si fa clic su un pulsante nell'intestazione. Ad esempio, ci sono 3 pulsanti Home, Attività e Aree. Se faccio clic sulle attività, l'intestazione e il piè di pagina della pagina dovrebbero rimanere invariati e la pagina delle attività dovrebbe trovarsi tra l'intestazione e il piè di pagina. Come lo posso fare?

risposte:

13 per risposta № 1

Sono d'accordo con rlemon. Penso che jQuery / AJAX sia quello che stai cercando. Per esempio:

<html>
<head>
<!-- Include Jquery here in a script tag -->
<script type="text/javascript">
$(document).ready(function(){
$("#activities").click(function(){
$("#body").load("activities.html");
});
});
</script>
</head>
<body>
<div id="header">
<a href="#" id="activities">Activities</a>
<!-- this stays the same -->
</div>
<div id="body">

<!-- All content will be loaded here dynamically -->

</div>
<div id="footer">
<!-- this stays the same -->
</div>
</body>
</html>

In questa semplice implementazione, ho appena creato 2 semplici pagine HTML, index.html sarà usato come modello. E activities.html, che contiene il contenuto che voglio caricare dinamicamente.

Pertanto, se faccio clic su Attività, dovrebbe caricare attività.html in senza ricaricare l'intera pagina.

Puoi scaricare la libreria jquery da jquery.org

Non ho provato questo, ma dovrebbe funzionare.

Spero che sia d'aiuto :-)


1 per risposta № 2

Quando la pagina viene consegnata - Intestazione + Corpo +Il piè di pagina è unito. Puoi trattarlo come una pagina. Quindi se nella tua intestazione hai chiamato un elemento nel tuo corpo, diciamo "Contenitore", quindi fornendoti di includerlo nella sezione del corpo sarai in grado di modificarlo.


1 per risposta № 3

Stai usando PHP o pagine lato server? Potresti avere solo intestazioni e piè di pagina inclusi. Jquery è davvero complesso per il solo voler includere testa e piè di pagina sulla tua pagina.


1 per risposta № 4

Stai cercando AJAX (acronimo di Asynchronous JavaScript and XML)

in jQuery puoi usare $ .ajax

Qui è un esempio / tutorial su come farlo con php.


1 per risposta № 5

Devi fare una richiesta AJAX al server. Il server rispondeva con l'HTML per "iniettare" tra l'intestazione e il piè di pagina. E il callback AJAX hendler sostituirà il contenuto attuale con quello nuovo.

Tutto questo è fatto per te dalla scorciatoia load funzione da jQuery. Vedere http://api.jquery.com/load/


1 per risposta № 6

creare un div che contenga il contenuto e dareè una classe unica o un id. Quindi nel codice jquery associare un evento click sugli elementi che si desidera utilizzare come navigazione e in tale bind utilizzare $ ("# div"). Load ("page.php") o qualcosa del genere per caricare il contenuto da un altro file in il div