CSS中的选项卡菜单 - 如何设置活动选项卡

Question

CSS中的选项卡菜单 - 如何设置活动选项卡

5

所以我有一个用CSS编写的选项卡菜单。它运行良好，但有一个问题 - 所有选项卡在我点击其中一个之前都不活动。例如，当我加载主页时，我希望第一个选项卡处于活动状态，这样我就可以阅读选项卡中的内容，而不需要点击它才能阅读。

HTML：

<div class="tabmenu">
     <div id="polski-tab" class="current">
        <a href="#polski-tab">Polski</a>
        <div>Put content here</div>
     </div>
     <div id="deutsch-tab">
        <a href="#deutsch-tab">Deutsch</a>
        <div>Put a different content here</div>
     </div>
     <div id="russian-tab">
        <a href="#russian-tab">Russian</a>
        <div>And thank God if it works</div>
     </div>
     <div id="french-tab">
        <a href="#french-tab">French</a>
        <div>It works! :D hahaha</div>
     </div>
     <div id="greek-tab">
        <a href="#greek-tab">Greek</a>
        <div>Fabuloso :D</div>
     </div>
  </div>

CSS（层叠样式表）：

.tabmenu {
   min-height: 178px;
   position: relative;
   width: 100%;
}

.tabmenu>div {
   display: inline;
}

.tabmenu>div>a {
   margin-left: -1px;
   position: relative;
   left: 1px;
   text-decoration: none;
   color: black;
   background: white;
   display: block;
   float: left;
   padding: 5px 10px;
   border: 1px solid #ccc;
   border-bottom: 1px solid white;
}

.tabmenu>div:not(:target)>a {
   border-bottom: 0;
   background: linear-gradient(to bottom, white 0%, #eee 100%);
}

.tabmenu>div:target>a {
   background: white;
}

.tabmenu>div>div {
   background: white;
   z-index: -2;
   left: 0;
   top: 30px;
   bottom: 0;
   right: 0;
   padding: 20px;
   border: 1px solid #ccc;
}

.tabmenu>div:not(:target)>div {
   position: absolute;
}

.tabmenu>div:target>div {
   position: absolute;
   z-index: 1;
}

- mentor93

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eternal1 · Accepted Answer

请按照以下方式修改您的代码：

.tabmenu>div:target>a, .tabmenu>div.current>a {
   background: white;
}

.tabmenu>div:target>div, .tabmenu>div.current>div {
   position: absolute;
   z-index: 1;
}

要使用JavaScript，最快捷的方法就是使用jQuery库，只需要添加以下代码：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

在闭合的</body>标签之前添加以下代码片段：

<script>
   jQuery(function($){
       $(".tabmenu").children("div").click(function(){
           $(".current").removeClass("current");
       });
   });
</script>

jsFiddle - 更新完毕。