Question

我正在制作一个简单的网站，其主文本窗口上只有文字。我想有Home，About，Contact等按钮。现在，我不想制作about.html，contact.html等，但我宁愿只更改文本而不加载新页面？（所以感觉更顺畅）。

所以我用适合每个页面的文本制作了几段（家里，等等），现在有什么方法可以解释我的问题吗？要点击按钮更改段落？或者有没有简单的方法来做这个而不为每个页面制作.html文件？

提前致谢。

Answer 1

您可能希望查看jQuery UI tabs插件，如果您将内容置于内联中，该插件将完全符合您的要求。或者，您可以拥有单独的内容文件，但可以使用相同的插件通过AJAX加载它们。即使您决定不使用该插件，您也可以使用类似的方法在页面加载时隐藏除“主要”选项卡之外的所有内容，然后在您的按钮上使用适当的hrefs使用锚点，以便您确定哪个标签显示。

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

Answer 2

使用jQuery Ui Tabs和 jQuery UI Accordion

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

jQuery UI Accordion

jQuery Ui Tabs

Answer 3

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

Answer 4

我同意tvanfosson并推荐类似UI标签或AJAX加载的东西，但如果你想看到一个非常基本的方法，你可以用jQuery hide / show来做到这一点：

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)
});

HTML jQuery在单击按钮时更改段落

4 个答案: