javascript - CSS current/active li

Question

只是做一个 ajax 页面，它使用 ul li 菜单。

演示:http://sitehelp.com.au/demos/ajax/

代码是(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;
    text-decoration:underline;
}

html 是:

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

链接通过 jquery 触发 ajax 请求，动态加载内部和外部页面……这不是问题。

我无法将 li current 或 li active。

菜单需要保持原样，所以我想肯定有一个 css 方法，用于显示菜单，如下所示:(当我们在该 ajax 页面上时。)

信息新闻贸易

所以说我们点击 PRESS 链接，我们可以控制它在页面上的效果。换句话说，它是下划线或粗体.. 或其他。有点像 class="selected"或 "active"...我很难过

Answer 1

在您的 menu.js 文件中，尝试将此添加到您的代码中:

//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...

现在只需为此添加一些可爱的 CSS...

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

祝你好运!