Tab menu in CSS - how to set an active tab


Tags: html,css

Problem :

So I have a tab menu written in CSS. It works fine, but there's one problem - all tabs are not active until I click on one of them. And I'd like, for example, first tab to be active just when I load the homepage, so I can read a content that's in the tab, not needing 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;
}


Solution :

Modify your code like this:

.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 use jQuery library, by adding:

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

before the closing </body> tag and then use following piece of code:

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

jsFiddle - updated.


    CSS Howto..

    How to cancel a CSS style set by 'hover child' selector on event?

    JavaScript: How to clear my custom keyboard mappings and use the default ones

    how to increase border line from the center using css animation

    How to fix bottom of layout of 100% height (jQuery Mobile and Google Map)?

    How to achieve following graphics via css

    how to fit text inside a HTML div

    How to link css to html in an express project?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    How can I get the name of a page via Laravel Blade

    How can I make a DIV background change color on hover if the DIV has a class of “disabled”? [closed]

    How to I center my submit button in CSS?

    How do I remove an extra overlay layer on p element?

    How to Style Specific Element On Hover With CSS?

    show/hide div on click

    Attempting to show logo using 'content' from CSS

    How does css inheritance work exactly?

    How do I control the wrapping of these
  • items?
  • How to show hidden div in the same line as the paragraph text?

    Hide all div element but show first two

    how to force horizontal scrolling in an HTML list using CSS?

    Fill dynamic
    's with content. But how to show it?

    How to create desktop widgets [closed]

    how can I center button below my text while using bootstrap css?

    How to change image size when nested in

    tag

    How can I align a text that has a specific width at the center of a div?

    How to use fallback values for `display` property in CSS?

    how to save responsive menu open/close value?

    How to build a mobile version of a non-mobile website? [closed]

    How can I center a table relative to one column in HTML/CSS?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files