www.webdeveloper.com
Results 1 to 7 of 7

Thread: HTML+CSS how make one div class active

  1. #1
    Join Date
    May 2012
    Posts
    5

    HTML+CSS how make one div class active

    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;

    }

  2. #2
    Join Date
    May 2012
    Posts
    5

    HTML+CSS div class active?

    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;

    }

  3. #3
    Join Date
    May 2011
    Posts
    52
    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.

    HTML Code:
    <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>

  4. #4
    Join Date
    May 2012
    Posts
    5
    Anyone can help how make this working? i dont know how to write jquery???

  5. #5
    Join Date
    May 2011
    Posts
    52
    just copy paste this whole block of code into an html file and load it up and see what it does

    HTML Code:
    <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>
    Last edited by damndaewoo; 05-21-2012 at 03:33 PM. Reason: because I messed it up the first time

  6. #6
    Join Date
    May 2012
    Posts
    5
    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

  7. #7
    Join Date
    May 2011
    Posts
    52
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles