CSS当前/活动li

问题描述

| 只是做一个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处于当前状态或li处于活动状态。 菜单需要保持原样，所以我确定要有一个css方法来显示菜单，如下所示：（当我们在该ajax页面上时。） 信息媒体 因此，说我们单击PRESS链接，我们可以控制其在页面上的效果。换句话说，它是下划线或粗体..或其他。一个类=“选择”或“活动”的类...我很困惑     

解决方法

        在您的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... */
}

祝好运！     ,        看来您的问题是您添加

:active

的方式 你写了 \“我有：

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

\” 你需要

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

注意the7而不是ѭ8 另请注意，因为您已经在

:hover

上进行了

text-decoration

的操作，所以您需要将样式

font-weight

而不是

text-decoration

。     ,        您可以使用一些jquery将活动类添加到单击的菜单项。 在此处查看解决方案：http://jsfiddle.net/K6F8m/     ,        在您的click函数中，添加一行，将

active

类添加到所单击的项目中，并从其他项目中删除

active

类。     ,        为此，您需要JS和CSS。 JS

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

的CSS

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

    ,        只需在用户单击链接时将一个类添加到链接，然后将其从所有其他链接中删除即可。

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

然后设置css类的样式。