2

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

4

2 回答 2

1

在您的 CSS 中添加：

#item-1 div {display: block}
于 2012-10-17T00:11:26.383 回答
1

我无法在小提琴中演示它（因为 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 获得相同的结果。

这篇文章解释了它为什么起作用：当 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/

于 2012-10-17T00:23:04.853 回答