Question

我有基于css的标签菜单，它对我来说很好，但默认情况下它没有显示第一个标签我希望我的第一个标签默认处于活动状态

Answer 1

为类display添加新的CSS：

我在<a>

中提供了id = "no"和tab1

<li id="item-1"> <a  href="#item-1">Tab 1</a>
      <div class="display" id ="no">
        <p>Tab Content 1</p>
          <p>Tab Content 1</p>
          <p>Tab Content 1</p>
      </div>
</li>

然后将id = "remove1prop"添加到<a> tab2和tab3

<li id="item-2"> <a id = "remove1prop" href="#item-2">Tab 2</a>
   <div>
     <p>Tab Content 2</p>
   </div>
</li>
<li id="item-3"> <a id ="remove1prop" href="#item-3">Tab 3</a>
   <div>
     <p>Tab Content 3</p>
   </div>
</li>

使用id = "test"

在div中包含所有标签

然后添加了以下javascript：

var test = document.getElementById("test");
var elem = document.getElementById("no");
elem.style.display = "block";
function whatClicked(evt) {
    if(evt.target.id == "remove1prop")
        elem.style.display="none";
    else
        elem.style.display="block";
}
test.addEventListener("click", whatClicked, false);

注意：从css样式表中删除之前给我的CSS

工作示例：http://jsfiddle.net/5452wxfy/6/

Answer 2

添加这篇文章：

.css-tabs ul.menu li > div.display {
    display: block;
}

后：

.css-tabs ul.menu li > div {
    display:none;
    position:absolute;
    width:100%;
    left:0;
    margin:-1px 0 0 0;
    z-index:-1;
    text-align:left;
    padding:0;
}

jsfiddle：http://jsfiddle.net/5452wxfy/2/

如何在css中默认显示第一个标签？

2 个答案: