Active Tab CSS

Discussion in 'CSS' started by petergg, Mar 4, 2012.

  1. #1
    Hi to all. I use wordpress and had created a form with tabs within a page post. Unfortunately I don't know how to highlight the current form tab with css.

    This is the div from the form:

                                            <div id="form_type">
    						<p>
    						<a href="#" id="change_log" class="change_type">Submit 1</a>
    						<a href="#" id="change_photo" class="change_type">Submit 2</a>
    						<a href="#" id="change_video" class="change_type">Submit 3</a>
    						</p>
    					</div>
    HTML:
    A little help will be very appreciated!
    Thanks.
     
    petergg, Mar 4, 2012 IP
  2. czent

    czent Peon

    Messages:
    45
    Likes Received:
    2
    Best Answers:
    5
    Trophy Points:
    0
    #2
    Add a special class something like "current" to the tab you want to be highlighted, like this:

    <a href="#" id="change_log" class="change_type current">Submit 1</a>

    And then you apply some special styling to that particular .current tab to make it look different than the rest. Usually you'll apply background & text colors, like this:

    .current { background:#555; color:#fff; }
     
    czent, Mar 5, 2012 IP