HTML jQuery更改按钮上的段落单击

我正在制作一个简单的网站，它有一个主文本窗口，上面只有文本。我希望有像Home、About、Contact等按钮。现在，我不想做About.html、Contact.html等，但我宁愿在不加载新页面的情况下更改文本？（因此感觉更平滑）

所以我为每一页（主页、关于等）写了几段文字，现在有什么方法可以回答我的问题吗？只需单击按钮即可更改段落？或者有没有简单的方法可以做到这一点，而不用为每个页面创建.html文件

---

提前感谢。

您可以将数据存储在内存中（在变量或某物中），然后将单击事件绑定到更改div的函数吗？

您可以将数据存储在内存中（在变量或某物中），然后将单击事件绑定到更改div的函数吗？

您可能需要查看插件，如果将内容内联放置，它将完全满足您的要求。或者，您可以拥有单独的内容文件，但使用相同的插件通过AJAX加载它们。即使您决定不使用该插件，您也可以使用类似的技术来实现相同的效果，即在页面加载时隐藏除主“选项卡”之外的所有内容，然后在div上使用锚定，并在按钮上使用适当的href，以允许您确定显示哪个选项卡

---

这是处理每页多个内容节的另一种方法。

您可能需要查看插件，如果将内容内联放置，插件将完全满足您的需要。或者，您可以拥有单独的内容文件，但使用相同的插件通过AJAX加载它们。即使您决定不使用该插件，您也可以使用类似的技术来实现相同的效果，即在页面加载时隐藏除主“选项卡”之外的所有内容，然后在div上使用锚定，并在按钮上使用适当的href，以允许您确定显示哪个选项卡

---

这是处理每页多个内容节的另一种方法。

我同意tvanfosson的观点，并推荐一些类似UI选项卡或AJAX加载的方法，但如果您想看到一种非常基本的方法，可以使用jQuery hide/show来实现：

HTML

---

我同意tvanfosson的观点，并推荐一些类似UI选项卡或AJAX加载的东西，但如果您想看到一种非常基本的方式，可以使用jQuery hide/show来实现：

HTML

使用及

使用jQuery UI accordion非常简单

使用和

使用jQuery UI accordion非常简单

---

你要找的是用AjaxI替换内容你要找的是用AjaxI替换内容应该澄清一下，我打破了CSS之类的好几种编程技术，但这是基本功能。这就是我想要的！感谢大家对jqueri UI的建议，我一定会仔细研究一下，因为它看起来很简单。只需告诉我一件事——我需要输入两个jQuery（到html文件中）吗？或者这只是一个经过修改的缓冲jquery类型？谢谢我应该澄清一下，我打破了一些好的编程技术，比如CSS和类似的东西，但这是基本的功能。这就是我想要的！感谢大家对jqueri UI的建议，我一定会仔细研究一下，因为它看起来很简单。只需告诉我一件事——我需要输入两个jQuery（到html文件中）吗？或者这只是一个经过修改的缓冲jquery类型？谢谢

<div id="container">
    <ul id="nav">
        <li><a href="#" class="index">Index</a></li>
        <li><a href="#" class="contact">Contact</a></li>
        <li><a href="#" class="other">Other</a></li>
    </ul>
    <div id="content">
        <div class="index hide">This is the home page.</div>
        <div class="contact hide" style="display:none;">This is my contact info.</div>
        <div class="other hide" style="display:none;">This is other stuff.</div>
    </div>
</div>​

$("#nav a").click( function() {
    $(".hide").hide(); // hide other divs, marked with hide class
    var c = $(this).attr('class').split(' ')[0]; //Get First Class
    $("#content ."+c).show(); //show anything inside content div with the class c (marked with a . to represent class)
});​