Question

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

DEMO：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激活。

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

信息新闻交易

所以说我们点击PRESS链接，我们可以控制它在页面上的效果。换句话说，它是下划线或粗体......或者其他什么。一类=“选定”或“活跃”...我被难倒了

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

祝你好运！

Answer 2

您的问题似乎就是添加:active

的方式

你写了

“我有：#top #menu li.active{text-decoration:underline;}”

你需要

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

请注意:而不是.

另请注意，您需要制作样式font-weight而不是text-decoration，而不是text-decoration上的:hover。

Answer 3

您可以使用一些jquery将活动类添加到单击的菜单项中。

在此处查看解决方案：http://jsfiddle.net/K6F8m/

Answer 4

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

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

然后设置css类的样式。

Answer 5

在点击功能中添加一行，将active类添加到单击的项目中，然后从其他项目中删除active类。

Answer 6

你需要JS和CSS。

<强> JS

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

<强> CSS

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

CSS current / active li

6 个答案: