Question

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

这是HTML。您可以看到我已经采用了朋友的预先存在的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 ＆gt; http://www.cssplay.co.uk/menu/slide_show

Answer 2

要使用idTabs插件，还有一个步骤。

对于您的三个mainbox div，每个div都需要一个与您的标签名称相匹配的ID（如ul中所定义）。

所以第一个div应该有id="optiona"，第二个div应该有id="optionb"等等。

基于此页面：http://www.sunsean.com/idTabs/，并自行测试。：）

您的div不需要一些注释：display: block。它们默认是块级的。

white-space: nowrap表示元素中的文本永远不会换行到下一行，并继续，直到你自己休息。

您正在使用XHTML（基于DOCTYPE和<html>标记中的其他内容）。既然你说你带走了朋友的东西并复制了它，你可能不打算这样做。我建议<!DOCTYPE html>和<html>表示HTML5兼容性，而不是将自己锁定到XHTML中。

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

2 个答案: