Question

所以我有一个用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;
}

Answer 1

像这样修改你的代码：

.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 - 已更新。

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

1 个答案: