Question

目前我必须点击标签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

Answer 1

在CSS中添加：

#item-1 div {display: block}

Answer 2

我无法在小提琴中演示它（因为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解释了它的工作原理： CSS中的目标伪选择器与URL中的哈希值和元素的ID相同时匹配。

编辑添加另一个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/

如何设置选项卡以在加载网页时自动显示

2 个答案: