CSS Tab Menu - How to Set an Active Tab

Question

So, I have a tab menu written in CSS. It works fine, but there is one problem - all tabs are inactive until I click on one of them. And I would like, for example, the first tab to be active only when I load the home page, so I can read the contents of the tab, I don’t need to click on it to read it.

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

Change your code as follows:

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

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

To use javascript, the fastest way is to use the jQuery library by adding:

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

before the closing tag </body>, and then use the following code snippet:

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

jsFiddle - .