选项卡框如今非常流行。查看 MSNBC 上的“探索”部分，或 Premium News Theme，了解它们如何在博客设置中使用。我认为这是有充分理由的。它允许您在页面中添加更多内容，同时减少杂乱，并吸引访问者与网站互动。此外，它也挺有趣的。
请注意这些“选项卡框”的工作原理。当您点击新选项卡时，它们会立即更改框内的内容——无需从服务器加载。这是因为所有选项卡的内容在页面加载时都会加载，但会隐藏起来，直到点击相应的选项卡。
使用 Yahoo! UI Tab View，创建选项卡框非常简单。以下是操作方法
1. 在页面中包含 Javascript 文件。
...
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/connection/connection-min.js"></script>
<script type="text/javascript" src="//yui.yahooapis.com/2.5.0/build/tabview/tabview-min.js"></script>
</head>
<body>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("content-explorer");
</script>
...2. 添加框的标记。
<div id="content-explorer">
<ul class="yui-nav">
<li class="selected"><a href="#">Articles</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Leprechaun</a></li>
</ul>
<div class="yui-content">
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
<div>
...
</div>
</div>
</div>此标记中的所有内容对于使其工作都很重要，包括所有元素的 ID 和类名。请注意，“yui-nav”中有四个列表项，“yui-content”中有四个 div，这一点也很重要。这些应该始终相等对应。
3. 使用 CSS 样式化
#content-explorer {
padding-top: 20px;
width:100%;
line-height:normal;
}
#content-explorer ul {
padding: 10px 10px 0;
list-style: none;
max-width: 770px;
background: url(images/menu_bg.gif) bottom repeat-x;
height: 31px;
}
#content-explorer ul li {
float: left;
background: url(images/right.gif) right top no-repeat;
text-align: center;
overflow: hidden;
margin-left: 5px;
}
#content-explorer ul li a {
display: block;
background: url(images/left.gif) left top no-repeat;
padding: 10px 20px 6px 20px;
font-weight: bold;
color: #999;
}
#content-explorer ul li a:hover {
color: #990000;
}
#content-explorer ul li.selected {
background: url(images/right_cur.gif) right top no-repeat;
}
#content-explorer ul li.selected a {
background: url(images/left_cur.gif) left top no-repeat;
padding-bottom: 8px;
color: #990000;
}
div.yui-content {
overflow: auto;
border-bottom: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
padding: 20px;
}CSS 完全由您决定，没有像标记中那样的命名限制。不要担心在其中设置 display 值以隐藏不同选项卡的内容，Javascript 会自动为您执行此操作。
对我来说，真正酷的部分在于所有这些都非常灵活。您可以在内容区域的这些 div 中做任何您能想到的事情。
不错！非常感谢您的努力。能够下载包含示例的 zip 文件真是太棒了！继续努力！
我也实现了 domtabs 并将其部件化。此处提供了很棒的使用说明 此处。只需将一个 .js 文件放到您的主题文件夹中并进行样式化即可。我还看到一个 WordPress 插件（我认为还有一些问题）用于选项卡菜单 此处。
我唯一的评论——我在 Firefox 中使用 NoScript，因此 YUI 选项卡窗格无法正常工作。NoScript 非常不信任…… ; )
唯一的问题是，任何已禁用 Javascript、未安装 Javascript 等的用户都没有看到选项卡无法工作的原因。我意识到大多数人会在顶部添加 noscript 标记以通知人们这一点——仅供参考。许多此类技巧似乎都预先打包了该通知，或者很容易发现某个错误/错误消息。在这种情况下，则没有。
无论如何，很棒的技巧！
不错的文章——一个小问题 Chris，为什么您引用 #content-explorer … 和 div.yui-content？为什么不完全引用它们（div#content-explorer、div.yui-content），因为这样可以更容易地阅读回 CSS。
@Michael：我认为，如果您正在使用 Javascript 阻止程序，您已经意识到您可能会破坏网站上的各种内容。但是是的，noscript 标记可能确实是一个好主意！
@Lazlow：那里没有特别的原因，只是轻微的粗心。
Yahoo 选项卡看起来不错。但我认为运行 1 个简单的选项卡界面需要**太多**文件。
例如，Adobe Spry Framework [链接] 具有相同类型的窗口小部件 [链接]，设置方式相同。并且仅使用 1 个 Javascript 文件和 1 个 Css.. 文件越少，HTTP 请求越少 == 加载速度越快
但再说一次，使用您认为适合自己的内容。
@V1（& Leanne）：所有这些链接都非常酷，感谢您分享。我应该查看更多 Adobe 的 Spry 内容。
我知道对于这个简单的选项卡框来说，四个 Javascript 包含似乎有点多……我认为 YUI 试图模块化工作，以便如果您使用其 UI 的其他部分，您将已经基本设置好了。而如果每个 UI 窗口小部件都只有一个，则每个文件可能包含大量不必要的重复代码。
啊，感谢您的回复 Chris。只是假设它背后可能有一个原因！
这个选项卡框非常好。我偶然发现了整个 YUI 东西，那也非常好！
有一点，链接在我的 Windows 机器上的 Netscape 7.1 中无法正常工作。您知道如何处理这个问题吗？
关于 Netscape 的更多信息……
我测试了您的两个示例网站“MSNBC”和“The Premium News Theme”。
MSNBC 惨败，不仅选项卡框，其他东西也乱七八糟。Premium……一个完美运行，没有任何问题，看起来不错，链接有效。
因此，有一种方法可以在 Netscape 7.1 中使其工作。您知道是什么吗？
或者，我只是落后于时代，并且已经放弃了对这个特定浏览器的考虑？
如果是这样，您定位的是哪些旧版浏览器？它与 YUI A 浏览器列表相同吗？
感谢您的答复！
@James：我理解需要/希望网页上的所有内容都能在所有可能的浏览器中工作，但在某些时候需要划定一条界限，我认为 Netscape 7.1 超出了这条界限。Netscape 7.1 现在已经有两个版本了（9.0.0.6 是最新版本），并且**即使是那个**Netscape 也已正式停止支持。如果像 MSNBC 这样拥有庞大且多元化受众的网站已决定不再支持它，这是一个好迹象，表明它不再是一个大问题=)
我相当确定无法强制此特定脚本在如此旧的浏览器中工作。我认为最好的方法是使用条件样式表以及 <noscript> 标记警告显示警告消息。
是否可以设置固定高度而不是自动高度？就像宽度一样？
谢谢
CR
@CR：当然，在 div.yui-content 的 CSS 中，只需设置一个高度值即可。如果框内所有内容都是图像，这将没问题，但如果在其中使用文本，请小心。为包含文本的元素设置静态高度会导致用户增加文本大小时出现问题。
Chris..感谢您的快速回复。
抱歉，我不太擅长这个……我究竟在哪里在 css 中添加此高度值？它是否靠近……
#page-wrap {
width: 450px;
margin: 25px auto;
}
关于文本建议，它不会自动创建垂直和水平滚动条吗？
谢谢，
CR
实际上它位于从此处开始的行
div.yui-content {
…
height: 200px;
…
}
如果您希望它使用滚动条，它不会自动这样做，但您可以将 overflow 值设置为“scroll”而不是现在的“auto”。现在将其设置为 auto 的原因是为了“清除”上面菜单项的浮动。
非常感谢您！
我确实保留了 auto，当文本太长时，滚动条会显示出来，所以……这就是我需要的。
再次感谢。
CR
嗯……也许我误解了重点，但是为什么使用一个大型框架来做这件事，而您可以自己用一小段 JavaScript 很轻松地实现呢？您可以自己创建这些按钮，并在其下方放置一些 div，并使用 display:none; 将它们全部隐藏。一旦您点击一个按钮，您就可以使用 JavaScript 命令将其显示打开。这难道不是更容易且更轻量级的方法，而不是为此使用整个框架吗？
您好，很棒的修改。我已经在我的网站上实现了它，但有时加载时间很长，看起来它似乎在等待整个页面加载完毕后再实施，因此，如果您有广告或图像需要一段时间才能加载，此修改也会如此。
有没有办法让它先加载？
另外，如何在其他帖子中提到的 NoScript 中添加内容？
谢谢，Steven
我对下载的演示感兴趣。网页链接到两个样式表，style.css 和 tabs.css。下载中仅包含一个表，style.css。尽管如此，演示仍然有效。缺少的表中有什么内容？
你好
我正在使用这些选项卡框……遇到了一些问题……
我想在网页上的多个位置使用这些选项卡框……
例如在网页的上部和下部。
上部的选项卡框在 IE7 中工作正常，但是……下部的选项卡框工作不正常……请帮忙……
所以问题是，我们可以在一个网页中使用多个此选项卡框吗？
请帮忙
谢谢
大家好
我在使用 YUI 选项卡时遇到问题，我的 jsp 页面包含一些 YUI
选项卡，其内容可以是 pdf……
–> 第一个和第二个选项卡包含 pdf 内容，如果我从
第一个选项卡导航到第二个选项卡，内容会正确显示，如果我再次
返回第一个选项卡，jsp 页面会挂起，并且不会
显示 pdf 内容，谁能告诉我
我哪里做错了？
它在 IE 7.x 和 Chrome 浏览器中运行良好，但在 Firefox 中不行。
这是代码
var tabView = new YAHOO.widget.TabView(‘demo’);
示例 1
浏览器新闻
选项卡一标签
选项卡二标签
选项卡三标签
<div><iframe id='webtabsframe' src='http://files.voicecurve.com/arcadian/arkansas/fayetteville/fayetteville - fort smith auth form.pdf' height="100%" width="100%"></iframe></div>
<div><p>选项卡三内容</p></div>
</div>
</div>
下载内容与演示内容不同吗？似乎需要将 style.css .content-explorer height:31 更改为 height:39 才能使其正常工作……
有没有简单的方法可以使选项卡右对齐？将 float:right 添加到 #content-explorer ul li 会更改选项卡顺序，而 #content-explorer ul float:right 会导致背景重复图像不再拉伸整个框的长度。