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.