Jsfiddle:http://jsfiddle.net/87YGW/
目前我必须单击选项卡 1 才能显示内容，但我希望选项卡 1 内容在打开页面时自动显示。
HTML:
<div id="tab2" class="css-tabs">
<ul class="noint11_menu">
<li id="item-1"> <a href="#item-1">Tab 1</a>
<div>tab conten1
</div>
</li>
<li id="item-2"> <a href="#item-2">Tab 2</a>
<div>
<p>Tab Content 2</p>
</div>
</li>
<li id="item-3"> <a href="#item-3">Tab 3</a>
<div id="notice">
<p>tab content 3 </p>
</div>
</li>
<li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
<div>
<p>Tab Content 4</p>
</div>
</li>
</ul>
</div>
CSS:
.css-tabs {
position: relative;
text-align: left; /* This is only if you want the tab items at the center */
height: auto
}
.css-tabs ul.noint11_menu {
list-style-type: none;
display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
display: block;
float: left;
}
.css-tabs ul.noint11_menu li > a {
color: #EEEEEE;
text-shadow: 1px 1px 1px #000;
font-family: 'MuliLight', Arial, sans-serif;
font-size: 14px;
text-decoration: none;
display: block;
}
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
}
.css-tabs ul.noint11_menu li > div > p {
border: transparent;
padding: 10px;
margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
cursor: default;
border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
display: block;
}
我无法使用 Javascript、Jquery 或 iframe
最佳答案
我无法在 fiddle 中演示它(因为 iframe)，但如果您直接链接到第一个选项卡，例如:http://www.yoururl.com/page#item-1，第一个选项卡的内容将在页面加载时可见。
您可以通过将所有代码放入一个新的空白 html 文件(CSS 和标记放在正确的位置)并将其另存为“test.html”来测试这一点。然后使用以下代码在同一文件夹中创建另一个 html 文件:
<html>
<body>
<a href="test.html#item-1">link</a>
</body>
</html>
保存并打开第二个文件，然后单击链接转到您的样式页面。请注意，第一个选项卡的内容是可见的，并且选项卡切换仍然按预期工作。
如果没有 JS 来重定向或更改窗口位置，我不相信仅通过 CSS 可以获得相同的结果。
This article解释了它的工作原理:当 URL 中的哈希值与元素的 id 相同时，CSS 中的 :target 伪选择器就会匹配。
编辑添加另一个hacky，但纯CSS“解决方案”:
使用#item-1 div {display: block}使第一个选项卡始终可见，并在所有选项卡上设置背景颜色:
.css-tabs ul.noint11_menu li > div {
display: none;
position: absolute;
width: 100%;
left: 0;
color: #ccc;
text-align: left;
padding: 0;
margin-left: 32px;
background: #fff; /* added this */
}
现在，其他选项卡在被选中时将隐藏第一个选项卡。演示:http://jsfiddle.net/87YGW/3/
关于javascript - 如何设置选项卡在加载网页时自动显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12925231/