CSS current / active li

Just doing a ajax page, which utilises ul li menu.

DEMO : http://sitehelp.com.au/demos/ajax/

The code is ( css )

#top #menu{
    float: left;
    list-style-type: none;
    margin: 0px 0 0 0px;
} 

#top #menu li{
    position:relative;
    left:300px;
    top:-22px;
    margin-right: 16px;
    text-transform: uppercase;
    color: #3399ff;
    font-size:18px;
    font-weight:bold;
    display:inline;
}

#top #menu li:hover{
    color: #ec008c;
    cursor: pointer;
    开发者_JS百科text-decoration:underline;
}

The html is:

<ul id="menu">
    <li id="home">Info</li>
    <li id="press">Press</li>
    <li id="trade">Trade</li>
</ul>

The links fire ajax request via jquery, to dynamically load internal and external pages... thats not the issue.

I cannot put li current or li active.

The menu needs to remain as is, so I am thinking surely there must be a css method, for showing the menu like so: ( when we are on that ajax page. )

INFO PRESS TRADE

So say we click the PRESS link, we can control its effect on page. In other words, it is underlines or bold.. or whatever. Sort of a class="selected" or "active" ... I am stumped

In your menu.js file, try adding this to your code:

//Manage click events
sections.click(function(){
    //show the loading bar
    showLoading();

    // ADD THIS?
    sections.removeClass('current');
    $(this).addClass('current');

    //load selected section
    switch(this.id){
        case "home": // etc etc...

Now just add some lovely CSS for this...

#menu li.current {
    font-weight:bold; /* or whatever... */
}

Good luck!

It looks like your problem is the way you are adding the :active

You wrote

"I have: #top #menu li.active{text-decoration:underline;}"

You need

#top #menu li:active{font-weight:bold;}

Notice the : instead of the .

Also notice you need to make the style font-weight instead of text-decoration as you are already doing text-decoration on the :hover.

You can use a bit of jquery to add an active class to the clicked menu item.

Check out the solution here: http://jsfiddle.net/K6F8m/

In your click function add a line that add an active class to the item that was clicked, and remove the active class from the other items.

You need both JS and CSS for this.

JS

sections.click(function(){
    ...
    sections.removeClass("active");
    $(this).addClass("active");
    ...
});

CSS

#top #menu li.active { text-decoration:underline; }

Just add a class to the link when a user clicks on it, and remove it from all other links.

$('#menu a').live('click', function(){
   $('#menu a').removeClass('active');
   $(this).addClass('active');
});

Then style the css class.