Charger le contenu de la page de lien en div lorsque l'utilisateur clique dessus

En espérant que quelqu'un pourra m'aider avec ce problème,

J'ai créé un JSFiddle avec le code

J'ai créé quelques code de base d'un site avec un en-tête, menu de navigation avec six liens, la div principale et à droite de l'encadré,

Ce que je cherche à atteindre, c'est que lorsqu'un utilisateur clique sur l'un des six liens de page sur la valeur liquidative du menu (e.g clics page4.html).

Le contenu de cette page un lien qui a été cliqué (e.g page4.html), est chargé dans la div principale sans le reste de la page (j'.e header, nav, barre de droite), l'actualisation du tout.

Div doit rester pour montrer que le contenu de l'e.g page4.html) jusqu'à ce que l'utilisateur clique sur un autre lien (e.g page6.html).

Alors seulement le contenu de la div principale devrait changer à partir de (e.g page4.html à page 6.html) sans autre contenu de rechargement/rafraîchissement de la page

Espérons-le, j'ai été en mesure de le faire assez claire de ce que je dois faire.

Voici le code:

CSS:

.header {
  text-align: center;
  width: 100%;
  height: 90px;
}

.nav {
  float: left;
  width: 20%;
  height: 500px;
  background: grey;
}

.main {
  float: left;
  width: 60%;
  height: 500px;
  background: lightblue;
}

.rightsidebar {
  float: right;
  width: 20%;
  height: 500px;
  background: lightgreen;
}

HTML:

<body>
  <div class="container">
    <div class="header">Site name</div>
    <div class="nav">
      <ul>
        <li><a href="#">Page1.html</a>

        </li>
        <li><a href="#">Page2.html</a>

        </li>
        <li><a href="#">Page3.html</a>

        </li>
        <li><a href="#">Page4.html</a>

        </li>
        <li><a href="#">Page5.html</a>

        </li>
        <li><a href="#">Page6.html</a>

        </li>
      </ul>
    </div>
    <div class="main">This is the Main Div that will load either page1.html -> page6.html depending on which Nav link the user clicks.. Note that when user clicks the nav link.. Only this div should reload with the content of said clicked page. i.e. If user clicks page4.html
      link in nva menu. This lightblue div will change from whats written here now and load the content from page4.html in this div but the header, Nav, and rightsidebar of the page will stay static and not refresh at all.</div>
    <div class="rightsidebar">blah blah blah blah blah</div>
  </div>

pourquoi utiliser des div à la place de l'iframe?
j'essaie de rester loin d'eux idéalement. Mais je pourrais utiliser un iframe si nécessaire, aussi longtemps que lorsque le lien est cliqué, seulement l'iframe chargé dans la div et la page ne marche pas actualiser
Ce que vous décrivez peut être fait avec l'appel ajax.

InformationsquelleAutor user2897821 | 2014-10-29

3

Une option est d'utiliser jQuery, la fonction de charge. Donner votre navigation ancres ID unique, et à partir de là, vous pouvez utiliser un code similaire à ceci:
```
$(function () {
    $("#nav_page_a").on("click", function () {
        $("#main").load("PageA.html");
    });
    $("#nav_page_b").on("click", function () {
        $("#main").load("PageB.html");
    });
});
```
Ont un coup d'oeil à ceci: http://api.jquery.com/load/
- Comment cela va affecter les résultats des moteurs de recherche? comme si un utilisateur cherche quelque chose sur la page 3, je voudrais toute la page d'affichée et non pas seulement le contenu de la page 3?
- Pour être honnête, je n'ai jamais construit un site web à l'aide d'une convention de ce genre, et je suis réellement curieux de savoir pourquoi vous n'êtes pas à la place à l'aide de server side includes (ou une masterpage si .NETTE) pour l'en-tête/nav/pied de page et il suffit de créer des pages individuelles pour chaque "page".
- Aussi @Shikhar la réponse ci-dessous est le chemin à parcourir, le mien est un travail de longue haleine moyen de le faire fonctionner ET de vous amener à voir comment il a travaillé, de son est succincte, et évolutive. Elle a le mérite d'être la meilleure réponse, en fait.
- Merci, je l'ai fait essayer sa réponse, mais a été incapable de le faire fonctionner d'une certaine façon, où est le vôtre fait. Eh bien en fait je veux que le site à se comporter comme elle le fait normalement en ce qui concerne la url pour chaque page et RÉFÉRENCEMENT etc. Mais veux juste qu'nav, header, footer, etc. rester statique et seulement la div principale rafraîchit et pas toute la page. Im sûr que côté serveur option rob être l'idéal, mais je n'ai aucune idée par où commencer ou ce langage ou un logiciel ne soit nécessaire.
- Je vois, juste assez, bien êtes-vous à l'aide de PHP, Java, ASP.NET? Ou peut-être une meilleure question peut-être est votre service d'hébergement, pour le site web Windows ou Linux?
- J'ai utilisé l'exemple de code lors de la tentative de son js. mais plus probablement une erreur de mon côté. Je suis à l'Aide d'un serveur linux, et ma page est créé avec php et html codage, certains js,css et mysql db. Mais quelqu'un a mentionné pour moi de regarder pjax ou spf js pour mettre en œuvre ce que im besoin. ce qui semble la meilleure option
- J'ai édité ma réponse. Il devrait maintenant fonctionner.
- Merci, je vais essayer quand je reçois une chance plus tard et donner de la rétroaction. Je n'avez pas besoin du code plus, mais peut encore être utile pour les autres.
- Il ne fonctionne pas pour moi non plus. 🙁
InformationsquelleAutor pmahomme

Ajouter des attributs href vos liens vers les pages que vous souhaitez aller.

<li><a href="Page1.html">Page1.html</a></li>
<li><a href="Page2.html">Page2.html</a></li>

Et puis le suivant devrait permettre de résoudre votre problème via Jquery

$(function(){
    $(".nav li a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behaviour
        var url = this.href;
        $(".main").load(url);
    });
});

InformationsquelleAutor Shikhar

1

à l'aide de jQuery
```
$(".main").load("yourpage.html");
```
InformationsquelleAutor shakirthow

Vous devez vous connecter pour publier un commentaire.