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

我正在尝试创建一个页面，页面顶部有一个水平导航条，下面有一个包含内容的框。导航栏不是一个大问题：有很多教程解释如何使用CSS将简单的HTML列表样式设置为导航栏。但我不知道如何处理内容框：我希望用户的选择（即从导航栏上的选项中选择）来确定框中显示哪些内容

这是HTML。您可以看到，我采用了一位朋友先前存在的HTML并对其进行了简化：

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

• 演示：

html

方案A
您选择了选项A。下面是一个列表


项目1
项目2
项目3

---

• >

---

要使用

idTabs

插件，您还有一步要做

对于三个

mainbox

div，它们都需要一个与选项卡名称匹配的ID（如

ul

中的定义）

因此，第一个div应该有

id=“optiona”

，第二个div应该有

id=“optionb”

，等等

基于此页面：，并测试了我自己：）

一些注释：

显示：块

对于您的div不是必需的。默认情况下，它们是块级别的

空白：nowrap

意味着元素中的文本永远不会换行到下一行，并继续，直到您自己换行

---

您正在使用XHTML（基于

DOCTYPE

和

标记中的附加cruft）。既然你说你拿了你朋友的东西并抄袭了，你可能就不打算这么做了。我建议

和

表明HTML5的兼容性，而不是将自己锁定在XHTML中。

您似乎在使用XHTML而不是HTML。这是故意的吗？你知道那个网站上有任何解决这个问题的材料吗？我在导航栏上看到了很多资料，但没有任何内容能够说明如何让内容取决于用户的选择。谢谢，谢谢。看起来这是Javascript。我想我会四处看看你正在使用的命令的教程。是的，不仅仅是javascript，你的html结构也应该像我在演示中所展示的那样得到纠正。在原始代码中，您也缺少标记。等等…如果我的答案解决了你的问题，请勾选右上角的复选框。谢谢。使用

fadeOut（）

和'fadeIn（）使它看起来更漂亮。

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

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