Question

由于某种原因，jquery不会将新的html加载到#textoPequeno div中。它实际上删除了旧内容，就其本身而言。

这是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>

和jquery代码

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

请查看实时示例： http://gabrielmeono.com/working/

修改

如果我从javascript代码中删除main，则该页面将不会加载到div中。它将保持原样。

Answer 1

摆脱+ ' .main'

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

只要'href'中的内容加载到#textoPequeno

，

就可以了

Answer 2

您的代码很好，您的HTML错误。

看起来您正在尝试创建独立页面，这些页面也具有通过ajax加载的功能。

您要将' .main'附加到.load()来电，这相当于从返回的内容中选择'.main'。如果你这样做，你所有的html页面都需要有一个class='main'的元素。

我的建议是使用id='main'代替课程。然后将您的通话更改为：$("#textoPequeno").load($(this).attr('href')+' #main');

Answer 3

rkw的回答是正确的。我想补充一点，你也可以将#main移动到实际的href prop。它可能看起来不多，但它会减少一些开销，如果您的AJAX调用失败（或者由于其他一些原因）用户被定向到实际的href - 它们将被发送到正确的位置。

Jquery点击功能没有加载新内容

3 个答案: