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

Question

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

这是HTML。 您可以看到我已经采用了朋友的预先存在的HTML并对其进行了简化：

http://jsfiddle.net/4FgFT/

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

Answer 1

演示： 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>

纯CSS解决方案 > http://www.cssplay.co.uk/menu/slide_show

Answer 2

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

对于您的三个mainbox div，它们每个都需要一个与您的选项卡名称匹配的ID（如ul所定义）。

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

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

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

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

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

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

问题描述

2 个解决方案

解决方案1
2 2011-02-19 11:36:25

解决方案2
0 已采纳 2011-02-19 11:47:36

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

问题描述

2 个解决方案

解决方案1 2 2011-02-19 11:36:25

解决方案2 0 已采纳 2011-02-19 11:47:36

解决方案1
2 2011-02-19 11:36:25

解决方案2
0 已采纳 2011-02-19 11:47:36