css ul li selected item problems

Question

I'm still learning CSS and I am trying to set an li as active and apply a style to it. So basically, I want the li style to stick once its clicked on. I did a little search and found the following css, but it does not work for me.

ul#[Id-Here] li a:hover,ul#[Id-Here] li.active a
{
  // here styling 
}

I'm having issues embedding all my HTML and CSS so I added the code to jsfiddle.

jsfiddle code

Any help would be gratefully appreciated.

Phillip

Answer 1

You didn't provide the js code in the jsfiddle, so as cantera said we can just guess, but ignoring that i'll try to point you out in the right direction. You will be needing javascript/jq to do this, you might be able to do it using css hovers and maybe -webkit-animation-fill-mode: forwards; , but nothing i can come up fast enough, bare in mind that hovers are not clicks, except in mobile browsers, so unless somebody comes up with a clever idea for css, i'll give you a simple approach using jq.

Html

<div id="tab-box-container">
        <ul id="tab-header">
            <li class="class="selected"">Overview</li>
            <li>Network</li>
        </ul>
        <div id="tab-content-container">
            <div  class="tab-content">
                <h3>Tab 1</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                    eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
            </div>
            <div  class="tab-content hidden">
                <h3>Tab 2</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
        </div>
</div>

Js

var tabs = $('#tab-header li');
var tabContent = $('.tab-content');
tabs.click(function(){
  var index = tabs.index( this );
  tabs.removeClass('active');
  $(this).addClass('active');
  tabContent.addClass('hidden');
  $(tabContent[index]).removeClass('hidden');
});

Now you don't need to use an id for each tab pairing with your tab-content id, you just need to place them in order, the first tab will match with the first tab-content, and so on...

Here is the last jsfiddle http://jsfiddle.net/zDNN9/16/

Good luck =)

Answer 2

I had a tweak and added something to your jsfiddle. If you want to append a class to a tab on click, you'll need to use javascript (or some library). I've included jQuery for ya.

Have a look at this and see if it does what you need: http://jsfiddle.net/zDNN9/12/

$('ul#tab-header li a').on('click', function() {
    $('ul#tab-header li a').removeClass('selected');
    $(this).addClass('selected');
});