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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With