单页动态内容替换站点——如何单独突出当前内容链接？答案

【问题标题】：Single page dynamic content replacement site - how to individually highlight current content links?单页动态内容替换站点——如何单独突出当前内容链接？
【发布时间】：2012-10-11 19:41:37
【问题描述】：

我有一个单页站点，当我单击菜单时，内容将通过 jquery 替换。虽然这些项目没有链接到不同的页面，只是不同的 div，但我希望菜单像常规网站菜单一样具有 3 种活动状态：非活动、悬停和“当前内容”（如当前/活动页面，但它赢了'实际上并没有链接到另一个页面）。

我希望每个单独的链接在单击并处于“当前内容”状态时与其悬停颜色相匹配。（现在我只有一个将任何“当前”链接变为红色的 jquery 片段......如果可能的话，我想要更多控制）我希望这是有道理的......下面的代码！

HTML

<div id="sidebar">
    <nav>
    <ul id="nav">
        <li id="home"><a id="showdiv1">Home</a></li>
        <li id="about"><a id="showdiv2">About</a></li>
        <li id="demoReel"><a id="showdiv3">Demo Reel</a></li>
        <li id="contact"><a id="showdiv4">Contact</a></li>
    </ul><!-- /#nav -->
    </nav>
</div><!-- /#sidebar -->

<div id="content">
        <div id="div1">Blah blah!</div>
        <div id="div2" style="display:none;">Blardy blah!</div>
        <div id="div3" style="display:none;">Moo!</div>
        <div id="div4" style="display:none;">Shmeee!</div>
</div><!-- /#content -->

CSS

#sidebar {
float:right;
width:30%;
}

    ul#nav li#home a:hover { color:red;}

    ul#nav li#about a:hover { color:green; }

    ul#nav li#demoReel a:hover { color:blue; }

    ul#nav li#contact a:hover { color:yellow; }

    .active a { color:red; }

#content {
    float:left;
    width:60%;
}

jQuery

$(function() {

//Highlight active navigation link
$("ul").delegate("li", "click", function() {
    $(this).addClass("active").siblings().removeClass("active");
});


//Fade-in/hide selected navigation link
$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').fadeIn();
});
$('#showdiv2').click(function() {
    $('div[id^=div]').hide();
    $('#div2').fadeIn();
});

$('#showdiv3').click(function() {
    $('div[id^=div]').hide();
    $('#div3').fadeIn();
});

$('#showdiv4').click(function() {
    $('div[id^=div]').hide();
    $('#div4').fadeIn();
});

})

我想指出，我对这些东西非常陌生，完全是自学的，所以请原谅错误。更重要的是，提前非常感谢您的帮助！！！

【问题讨论】：

标签： jquery css navigation highlight current-page

【解决方案1】：

不仅仅是

.active a { color:red; }

尝试替换

ul#nav li#home a:hover { color:red;}
ul#nav li#about a:hover { color:green; }
ul#nav li#demoReel a:hover { color:blue; }
ul#nav li#contact a:hover { color:yellow; }

与

ul#nav li#home a:hover, ul#nav li#home.active a { color:red;}
ul#nav li#about a:hover, ul#nav li#about.active a { color:green; }
ul#nav li#demoReel a:hover, ul#nav li#demoReel.active a { color:blue; }
ul#nav li#contact a:hover, ul#nav li#contact.active a { color:yellow; }

这样，每个链接在悬停时或在其父级“活动”时获得其特殊颜色。

【讨论】：