javascript - 关于导航栏和内容框的完整新手 CSS 问题

Question

我正在尝试创建一个页面，其中包含一个横跨页面顶部的水平导航栏和一个包含内容的框。导航栏不是什么大问题:有很多教程可以解释如何使用 CSS 将简单的 HTML 列表样式化为导航栏。但我不知道如何处理内容框:我希望用户的选择(即从导航栏上的选项中进行选择)来确定框中显示哪些内容。

这是 HTML。你可以看到我拿了一个 friend 已有的 HTML 并简化了它:

• http://jsfiddle.net/4FgFT/

目前它只显示三个框。我希望它显示一个框，其内容由用户从导航栏中选择的选项决定。我希望这是清楚的。谢谢。

Answer 1

• DEMO: http://aseptik.net/demo/complete-newbie-css-question-about-navigation-bars-and-content-boxes/

$(function() {
    $('#topmenu1 li a').click(function(e) {
        e.preventDefault();
        var tabContent = this.hash;
        $(tabContent).show().siblings('.mainbox').hide()
    });
});

html

<ul><li><a href="#optiona">Option A</a></li></ul>

    <div id="optiona" class="mainbox">
    <h2>Option A</h2>
    <p>You've selected Option A. Here is a list.</p>
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul>
    </div>

---

• Pure CSS solution > http://www.cssplay.co.uk/menu/slide_show