创建 CSS/JavaScript 选项卡面板 - 每个导航项与其相应内容位于同一 div 中
我需要创建一组 CSS/JavaScript 选项卡面板。 然而，我见过的大多数示例都将导航与内容放在单独的 DIV 中。例如：
http://webfx.eae.net/dhtml/tabpane/tabpane.html
http://www.stilbuero.de/jquery/tabs_3/
是有一个 CSS 选项卡示例，其中每个选项卡导航项与其相应内容位于同一 div 中？
像这样的东西：
<div id="tab-item=1">
<div id="tab-item-1-nav"> ... </div>
<div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
<div id="tab-item-2-nav"> ... </div>
<div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
<div id="tab-item-3-nav"> ... </div>
<div id="tab-item-3-content"> ... </div>
<div>
I need to create a set of CSS/JavaScript tab panels.
However, most the examples I have seen put the navigation in a separate DIV from the content. For example:
http://webfx.eae.net/dhtml/tabpane/tabpane.html
http://www.stilbuero.de/jquery/tabs_3/
Is there an CSS tab example where each tab navigation item is in the same div as its corresponding content?
Something like this:
<div id="tab-item=1">
<div id="tab-item-1-nav"> ... </div>
<div id="tab-item-1-content"> ... </div>
<div>
<div id="tab-item=2">
<div id="tab-item-2-nav"> ... </div>
<div id="tab-item-2-content"> ... </div>
<div>
<div id="tab-item=3">
<div id="tab-item-3-nav"> ... </div>
<div id="tab-item-3-content"> ... </div>
<div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是可能的，但事实上，这肯定是不可取的（这是一项正在进行的工作，昨天在 IE7 中工作得很顺利，今天在同一个浏览器中被破坏了......）。
原则是将选项卡导航粘在一起，因此您必须使用
position:absolute;从流程中删除选项卡内容（编辑：您不能将它们浮动之后 下一个选项卡内容）。因此出现了许多问题：你不能在选项卡内容下面有其他内容，因为你不再知道它的高度（当然在 JS 中或使用 max-height/height 和使用溢出属性创建的滚动条）。当您控制内容的宽度时，您可以轻松地将内容放在右侧。
这是一个功能演示：http://jsfiddle.net/3skpt/1/ （使用 jQuery 和 jQueryTools，在 Fx 3.6.4、Saf 4.0.x、Op 10.54 中测试成功）
今天我将更新我的 IE7 调试结果，无论成功与否。
此处的导航并未与内容分离，并且开箱即用，因此使用
body.js类不会在 JS 不起作用时中断显示。标题和
.js类中的链接不应像这个已经太长的示例那样进行硬编码，而应通过 JS 添加。现在，虽然这个例子至少在现代浏览器中工作，有一些限制（页脚？），但当 JS 起作用时我会重新组织内容以避免绝对定位。在 jQuery 中，在第一个
.tab-item容器之前创建一个容器，然后移动其中的每个h1是相当快的。我相信它更加强大;)This is possible but, as is, pretty certainly isn't advisable (it's a work in progress and worked like a charm in IE7 yesterday and is broken today in this same browser ...).
The principle is to stick your tab-nav together so you have to remove from the flow your tab-content with
position: absolute;(EDIT: you can't float them after the next tab-content).Thus many problems arise: you can't have other content below your tab-content as you don't know anymore its height (except in JS of course or with max-height/height and a scrollbar created with overflow property). You can have content on the right pretty easily as you control the width of your content.
Here is a functional demo: http://jsfiddle.net/3skpt/1/ (using jQuery and jQueryTools, tested successfully in Fx 3.6.4, Saf 4.0.x, Op 10.54)
I'll update today the results of my IE7 debugging, whether successful or not.
The navigation isn't separated from the content here and is functional out of the box so a
body.jsclass is used not to disrupt display when JS isn't functional.Links in headings and the
.jsclass shouldn't be hardcoded as in this already too long example but should be added via JS.Now, though this example work at least in modern browsers with a few constraints (footer?), I'd reorganise the content when JS is functional in order to avoid the absolute positioning. It's pretty fast in jQuery to create a container before the first
.tab-itemcontainer and then move everyh1in it. I believe it's far more robust ;)