0

我正在制作一个简单的网站，它有一个主文本窗口，上面只有文本。我想要主页、关于、联系人等按钮。现在，我不想制作 about.html、contact.html 等，但我宁愿只更改文本而不加载新页面？（所以感觉更流畅）。

所以我用适合每个页面（主页，关于等）的文本制作了几段文字，现在有什么方法可以满足我的要求吗？只需单击按钮即可更改段落？或者是否有任何简单的方法可以做到这一点，而无需为每个页面制作 .html 文件？

提前致谢。

4

4 回答 4

2

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

jQuery UI 手风琴是另一种处理每页多个内容部分的方法。

于 2012-12-21T02:50:06.507 回答
1

使用jQuery Ui Tabs和 jQuery UI Accordion。

使用 jQuery UI 手风琴非常容易。

jQuery UI 手风琴

jQuery UI 选项卡

于 2012-12-21T04:09:18.223 回答
0

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

于 2012-12-21T02:43:18.377 回答
0

我同意 tvanfosson 并推荐 UI 选项卡或 AJAX 加载之类的东西，但如果你想看到一种非常基本的方式，你可以使用 jQuery 隐藏/显示来做到这一点：

http://jsfiddle.net/ADDPH/7/

HTML

<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>​

jQuery

$("#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)
});​
于 2012-12-21T03:50:51.587 回答