Javascript 在不重新加载页面的情况下更改内容

我有一页。这是一个重要的商店网站。 我希望当客户单击图标时，例如

windows7

，它会删除旁边的其他产品，并编写其说明和付款按钮。 我已经成功地不允许页面刷新，只允许查看内容。 但问题在于账单；我想在页面末尾更改它，每当我单击

windows7

的图标时，它都会从顶部向我打开我想要的页面。 我正在使用以下代码：

 <script>
     $("div.haha").tabs("img.one > div", {effect: 'ajax'});
 </script>

$（“div.haha”）.tabs（“img.one>div”，{effect:'ajax'}）；

我只想让它改变内容，而不是从头开始

<div id="haha">
    <a href="product1.html"><img class="one" src="imgs/product1.png"></a>
    <a href="#"><img class="two" src="imgs/product2.png"></a>
    <a href="#"><img class="three" src="imgs/product 3.png"></a>
    <a href="#"><img class="four" src="imgs/product4.png"></a>
</div>

---

使用“haha”

id实际访问
div
，您应该使用

$（“div#haha”）

选择器。
使用“haha”
id实际访问
div
，您应该使用

$（“div#haha”）

选择器。
我正在更改代码，因为我手头有这段代码，从我所看到的情况来看，它运行得非常好，似乎符合您的所有需要

Javascript：（使用jQuery1.9.1测试）


$（函数（）{
$（“a[rel='haha']）。单击（函数（e）{
e、 预防默认值（）；
/*
如果取消对上述行的注释，html5不受支持的浏览器不会更改url，但会显示ajax内容；
如果有注释，html5不支持的浏览器会将页面重新加载到指定的链接。
*/
//获取已单击的链接位置
pageurl=$（this.attr（'href'）；
//获取ajax内容并以id为“哈哈”的div显示
$.ajax（{url:pageurl+'？rel=haha'，success:function（data）{
$（'#haha'）.html（数据）；
}});
//停止刷新中给出的页面
返回false；
});
});

html示例：

This is the code outside the div.  This shouldnt be effected.

<br /><br />
Here are the links outside the div to show you how it works.  IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
<a href="page2.php" rel="haha">IMG 1</a>
<a href="page2.php">IMG2 - NO REL</a> 
    <a href="../index.php">IMG3</a>
    <a href="http://www.kygar.com/code/haha.php">RESET</a>


<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
    <a href="../index.php" rel="haha">IMG1</a>
    <a href="../services.php" rel="haha">IMG2</a>
    <a href="http://www.gmail.com">IMG3 - NO REL</a>
</div>

这是div之外的代码。这不应生效。



下面是div外部的链接，向您展示它是如何工作的。IMG 2将刷新页面并更改url，因为url中缺少rel=“haha”








只需知道，要加载到div中的任何链接都需要一个rel=“haha”（可以更改为任何您想要的名称）。如果您想完全加载页面（如更改页面），只需从url中删除rel=“haha”

代码工作原理演示：
我正在更改代码，因为我手头有这段代码，从我所看到的情况来看，它工作得非常好，似乎符合您的所有需要

Javascript：（使用jQuery1.9.1测试）


$（函数（）{
$（“a[rel='haha']）。单击（函数（e）{
e、 预防默认值（）；
/*
如果取消对上述行的注释，html5不受支持的浏览器不会更改url，但会显示ajax内容；
如果有注释，html5不支持的浏览器会将页面重新加载到指定的链接。
*/
//获取已单击的链接位置
pageurl=$（this.attr（'href'）；
//获取ajax内容并以id为“哈哈”的div显示
$.ajax（{url:pageurl+'？rel=haha'，success:function（data）{
$（'#haha'）.html（数据）；
}});
//停止刷新中给出的页面
返回false；
});
});

html示例：

This is the code outside the div.  This shouldnt be effected.

<br /><br />
Here are the links outside the div to show you how it works.  IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
<a href="page2.php" rel="haha">IMG 1</a>
<a href="page2.php">IMG2 - NO REL</a> 
    <a href="../index.php">IMG3</a>
    <a href="http://www.kygar.com/code/haha.php">RESET</a>


<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
    <a href="../index.php" rel="haha">IMG1</a>
    <a href="../services.php" rel="haha">IMG2</a>
    <a href="http://www.gmail.com">IMG3 - NO REL</a>
</div>

这是div之外的代码。这不应生效。



下面是div外部的链接，向您展示它是如何工作的。IMG 2将刷新页面并更改url，因为url中缺少rel=“haha”








只需知道，要加载到div中的任何链接都需要一个rel=“haha”（可以更改为任何您想要的名称）。如果您想完全加载页面（如更改页面），只需从url中删除rel=“haha”

代码工作原理演示：
您应该像这样进行jQuery调用：$（'#haha'），它通过元素的ID属性进行选择。我很困惑。您是否在寻找代码来实际针对div并将div更改为新内容？或者您当前的代码只是没有更改div？如果它只是没有改变div，那是因为developer82在评论中说了什么，而zavg在回答时说了什么。我建议使用“$”（“#haha”）`与
$（“div#haha”）
相比，尽管在我看来这是一个更干净的代码。您好，我编辑了代码，但它仍在将页面更改为页面顶部，而不是在同一位置。您应该这样进行jQuery调用：$（“#haha”），它根据元素的ID属性进行选择。我感到困惑。您是否在寻找代码来实际针对div并将div更改为新内容？或者您当前的代码只是没有更改div？如果它只是没有改变div，那是因为developer82在评论中说了什么，而zavg在回答时说了什么。我建议使用“$”（“#哈哈”）而不是
$（“div#哈哈”）
虽然我认为这是一个更干净的代码。您好，我编辑了代码，但它仍在将页面更改为页面顶部，而不是在同一位置您好，我编辑了代码，但它仍在将页面更改为页面顶部，而不是在同一位置。您是否有代码阻止链接执行默认设置？默认情况下，链接将更改页面。您需要确保有
返回false函数内部，甚至可能
e.preventDefault（）取决于脚本的设置方式。另外，我很确定要完成这一点，您需要在javascript函数中设置代码，以便所有代码一起工作。是的，我只希望它更改内容并停留在它没有返回的位置上。我是javascriptI的新手。我已经发布了一个答案。您将看到像
e.preventDefault（）这样的行
和
返回false阻止浏览器对链接执行正常操作。我只是使用了演示文本和内容，以便您可以看到它是如何工作的。通常，在这段代码中，url会发生变化，并且会设置为“后退”按钮会发生变化；然而，我把它们拿了出来，因为从我收集到的信息来看，你不需要这些