Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post

    How to make an active tab in nth-child css?

    Hello,

    I am using the following codes for making a navigation bar!

    Code:
    <div id="top"> -- This ID is basically a navigation bar
    
    <ul class="topnav"> 
    <li class="first">Home</li> ----- This Css Makes my Home as active tab always.
    <li> About </li> ---- This is others tabs which I want to make it active when someone click on it not visited but active when someone opens a page!
    </ul>
    </div>
    Please help me to make other tabs active!

    Testing Link!

    Code:
    /* top navigation */
    .topnav { z-index:99; margin:0px; padding:1px 0px; list-style:none; line-height:1; }
    
    .topnav a { z-index:100; position:relative; display:block; text-decoration:none; }
    
    .topnav li { float:left; width:auto; }
    
    .topnav li a { padding:7px 13px 6px 13px; font-size:11px; font-weight:bold; color:#1e598e; line-height:18px; text-transform:uppercase; text-decoration:none; }
    
    .topnav li a:hover, .topnav li a:active { background:#ffffff; color:#000000; text-decoration:none; }
    
    .topnav li.first a { background:#FFFFFF; color:#000000; border-top: 2px solid red; }
    
    .topnav .first { background-color: #FFFFFF; color: #FFFFFF; }
    
    .topnav li ul li a, .topnav li ul li a:visited { background:#fff; width:140px; padding:7px 13px 6px 13px; color:#26b; font-size:11px; font-weight:bold; border-bottom:none; text-transform:uppercase; }
    
    
    
    /* topnav indicator */
    .topnav .sf-sub-indicator { display:none; }
    .topnav li ul .sf-sub-indicator { background:url(images/icon-arrow-right.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }
    
    ul.topnav li{
    background:transparent;
    }
    ul.topnav li a{
    border-top:2px solid transparent;
    }
    ul.topnav li a:hover {
    background:white; color:blue;
    }
    
    ul.topnav li:nth-child(1) a:hover {
    
    border-top: 2px solid red;
    }
    ul.topnav li:nth-child(2) a:hover {
    
    border-top: 2px solid blue;
    }
    ul.topnav li:nth-child(3) a:hover{
    
    border-top: 2px solid green;
    }
    ul.topnav li:nth-child(4) a:hover{
    
    border-top: 2px solid yellow;
    }
    Last edited by unleash; 07-20-2011 at 12:41 AM. Reason: Forget to paste CSS!

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Your class shouldn't be "first", it should be "active" or "selected".

    Simply add this class to the tab that the page is on.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post
    YOu mean like this?

    <li class="select"> Home </li>
    <li> About Us</li>

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post
    I tried both none of them working!

    I have made this code myself and I suspect that some are duplicate so please check the code as well there was no mistakes in it!

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Okay have a look at this:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <meta charset="utf-8">
        <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      font-family: verdana, sans-serif;
      font-size: .825em;
    }
    nav ul {
      margin: 2em;
      list-style: none;
    }
    nav li {
      float: left;
      border: #ddd solid;
      border-width: 1px 1px 1px 0;
    }
    nav li:first-child {
      border-left-width: 1px;
    }
    nav li:hover {
      background: #39f;
    }
    nav a {
      padding: .5em 1em;
      display: block;
      text-decoration: none;
      color: #06c;
    }
    nav li:hover a {
      color: #fff;
    }
    nav .selected {
      background: #06c;
    }
    nav .selected a {
      color: #fff;
    }
        </style>
      </head>
      <body>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li class="selected"><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </nav>
      </body>
    </html>
    Now change the LI which has the class #selected. See how it works? All you have to do is which LI has that class and your navigation changes.

  • #6
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post
    No Not working!

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post
    I fixed It, thanks How Can I marked this resolve!

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Unleash, just edit your opening post then click go advanced. Next, just use the prefix dropdown menu to select Resolved. ^_^
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #9
    New Coder
    Join Date
    Jul 2011
    Posts
    54
    Thanks
    5
    Thanked 1 Time in 1 Post
    Thanks
    Last edited by unleash; 07-20-2011 at 12:41 AM.


  •  

    Posting Permissions

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