HTML+CSS how make one div class active

@valezijaMay 20.2012

Hello really need help.
How make one of div class active by default.
My code HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />

<link rel=”stylesheet” href=”css/taby.css” type=”text/css” media=”screen”> </head> <body> <div class=”tabsLink”> <a href=”#tab1″>A</a> <a href=”#tab2″>B</a> </div>

<br> <a class=”tabs” id=”tab1″></a> <div class=”tab”> <a href=”http://www.google.lt”>Google</a><br> <br> </div>

<a class=”tabs” id=”tab2″></a> <div class=”tab”> <a href=”http://www.nigma.ru”>Nigma</FONT></a><br> </div>

</body>

</html>

CSS code is:

.tabs {
opacity: 0;
visibility: hidden;
}
.tab{
position:absolute;
visibility: hidden;

z-index: 10;

}
.tabs:target+.tab {
opacity: 1;
visibility: visible;
}
.tabsLink a{
background-color:#478CFB;
padding:5px;
font: bold 12pt “Trebuchet MS”, tahoma, verdana, arial narrow, arial;
color:#fff;
text-decoration:none;

-webkit-border-top-left-radius: 1px; -webkit-border-top-right-radius: 1px; -moz-border-radius-topleft: 1px; -moz-border-radius-topright: 1px; border-top-left-radius: 1px; border-top-right-radius:1px;

}

to post a comment

HTML

6 Comments(s) _↴

@valezijaauthorMay 20.2012 — #Hello really need help.

How make one of div class active by default.

My code HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

 <link rel="stylesheet" href="css/taby.css" type="text/css" media="screen">
  </head>
  <body>
   <div class="tabsLink">
   <a href="#tab1">A</a>
   <a href="#tab2">B</a>
   </div>
 
   <br>
   <a class="tabs" id="tab1"></a>
   <div class="tab">
   <a href="http://www.google.lt">Google</a><br>
   <br>
   </div>
 
   <a class="tabs" id="tab2"></a>
   <div class="tab">
  <a href="http://www.nigma.ru">Nigma</FONT></a><br>
   </div>
 
 
  </body>

</html>

CSS code is:

.tabs {

opacity: 0;

visibility: hidden;

}

.tab{

position:absolute;

visibility: hidden;

z-index: 10;

}

.tabs:target+.tab {

opacity: 1;

visibility: visible;

}

.tabsLink a{

background-color:#478CFB;

padding:5px;

font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;

color:#fff;

text-decoration:none;

-webkit-border-top-left-radius: 1px;
  -webkit-border-top-right-radius: 1px;
  -moz-border-radius-topleft: 1px;
  -moz-border-radius-topright: 1px;
  border-top-left-radius: 1px;
  border-top-right-radius:1px;

}

@damndaewooMay 21.2012 — #Not sure what you are trying to do but from the look of it I think you are trying to have one div visible and the other not, then switching when the other tab link is clicked? if that is what your after the below code works well but requires jquery.

[code=html]
 
 <html>
 <head>
 <!-- include jquery library from wherever you like -->
 <script type="text/javascript" src="/js/jquery.js"></script> 
 
 <!-- this script runs the whole shebang -->
 <script type="text/javascript">
 function showonlyone(thechosenone) {
 $('div[title|="tabs"]').each(function(index) {
 if ($(this).attr("id") == thechosenone) {
 $(this).show(0);
 }
 else {
 $(this).hide(0);
 }
 });
 }
 </script>
 </head>
 <body>
 <!-- these links select the tab to display -->
 <a id="tablink1" onclick="javascript:showonlyone('tabs1')">Show First Tab</a>
 <a id="tablink2" onclick="javascript:showonlyone('tabs2')">Show Second Tab</a>
 <a id="tablink3" onclick="javascript:showonlyone('tabs3')">Show Third Tab</a>
 
 <!-- each tab link makes the corresponding div visible -->
 <div title="tabs" id="tabs1">
 This is the First Tab
 </div>
 
 <div title="tabs" id="tabs2">
 This is the Second Tab
 </div>
 
 <div title="tabs" id="tabs3">
 This is the Third Tab
 </div>
 
 </body>
 </html>
 
 [/code]

@valezijaauthorMay 21.2012 — #Anyone can help how make this working? i dont know how to write jquery???

@damndaewooMay 21.2012 — #just copy paste this whole block of code into an html file and load it up and see what it does

[code=html]<html>
 <head>
 <!-- include jquery library from wherever you like -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
 
 <!-- this script runs the whole shebang -->
 <script type="text/javascript">
 function showonlyone(thechosenone) {
 $('div[title|="tabs"]').each(function(index) {
 if ($(this).attr("id") == thechosenone) {
 $(this).show(0);
 }
 else {
 $(this).hide(0);
 }
 });
 }
 </script>
 
 <style type="text/css">
 .tabs {display:none}
 </style>
 
 </head>
 <body>
 <!-- these links select the tab to display -->
 <a id="tablink1" href="#" onclick="javascript:showonlyone('tabs1')">Show First Tab</a><br />
 <a id="tablink2" href="#" onclick="javascript:showonlyone('tabs2')">Show Second Tab</a><br />
 <a id="tablink3" href="#" onclick="javascript:showonlyone('tabs3')">Show Third Tab</a><br />
 
 <!-- each tab link makes the corresponding div visible -->
 <div title="tabs" id="tabs1">
 This is the First Tab
 </div>
 
 <div title="tabs" id="tabs2" class="tabs">
 This is the Second Tab
 </div>
 
 <div title="tabs" id="tabs3" class="tabs">
 This is the Third Tab
 </div>
 
 </body>
 </html>
 [/code]

@valezijaauthorMay 22.2012 — #Will it work if i put in Show First Tab~(Link) and press link will it stay on Tablink1 if i press this Tab(Link), because i have frames in one this meniu in othen then i press Link from this meniu opened this Link but meniu must stay in the same position not change to TabLink2 or etc. I write to you know because saw that you are online i will check it today a little bit later

thank you of your help you really nice person

@damndaewooMay 22.2012 — #Anything you put in tab one will stay in tab one. If you click the tab two link, tab one will disappear and tab two will display and vice-versa. I really think you should copy past the whole block of code into a new html file and just play with it to see what it does.

Also in #HTML _↴

Graphical HTML Editor How To Make it on Blogger and Dropbox?HTML 4.01 Transitional Browser support issues

Success!

Help @valezija spread the word by sharing this article on Twitter...

Tweet This

HTML+CSS how make one div class active

6 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

HTML+CSS how make one div class active

6 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #HTML _↴