Pour une raison quelconque, jquery ne charge pas le nouveau html dans la div #textoPequeno. Il supprime en fait l'ancien contenu, aussi loin que possible.

Voici le code html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="include/javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Opera</title>
</head>

<body>
    <div class="main">
        <div id="header">

            <h1 id="logo">
                <a href="#">Linux Logo</a>
            </h1>

            <ul>
                <li><a href="test.html">Home</a></li>
                <li><a href="test">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>

            <div id="player"></div>

        </div>
    <div id="imagen"></div>
    <h2 id="textoGrande"><p>Opera ahora<br /> mas acojedor...</p>
    </h2><h3 id="textoPequeno"><p>En su nueva versión, Opera apuesta por un nuevo diseño y pestañas visuales, un motor más veloz que incrementa su velocidad en un 40% frente a su anterior versión y un mejor soporte de estándares.</p>

    </h3></div>


</body></html>

Et le code jquery

    $("li a").live("click", function(){
       $("#textoPequeno").load($(this).attr('href')+' .main');    
       return false;
});

Veuillez vérifier l'échantillon en direct: http://gabrielmeono.com/working/

MODIFIER:

Si je supprime le principal du code javascript, la page ne se chargera pas à l'intérieur du div. Il restera tel quel.

0
Gabriel Meono 8 nov. 2011 à 11:07

3 réponses

Meilleure réponse

Votre code est correct, votre code HTML est incorrect.

Il semble que vous essayiez de créer des pages autonomes qui peuvent également être chargées via ajax.

Vous ajoutez ' .main' à votre appel .load(), ce qui équivaut à sélectionner '.main' dans le contenu renvoyé. Si vous faites cela, toutes vos pages html doivent contenir un élément contenant class='main'.

Ma suggestion serait d'utiliser id='main' au lieu d'une classe. Modifiez ensuite votre appel en: $("#textoPequeno").load($(this).attr('href')+' #main');

1
rkw 8 nov. 2011 à 08:39

Se débarrasser de + ' .main'

$("li a").live("click", function(){
   $("#textoPequeno").load( $(this).attr('href') );    
   return false;
});

Est bien tant qu'il y a du contenu dans 'href' à charger dans #textoPequeno

2
Sinetheta 8 nov. 2011 à 07:25

La réponse de rkw est correcte. J'ajouterais que vous pouvez également déplacer le #main vers l'accessoire href réel. Cela peut ne pas sembler beaucoup, mais cela réduira certains frais généraux et en cas d'échec de votre appel AJAX (ou pour d'autres raisons), l'utilisateur est dirigé vers le href réel - il serait envoyé au bon endroit.

0
R Down 8 nov. 2011 à 08:50