html - CSS 中的选项卡菜单 - 如何设置事件选项卡

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