Jquery 在动态生成的页面上单击另一个链接时，如何在单击后保持链接上的悬停状态和关闭状态

我不知道这是否可以用css或javascript解决。我有一系列用css构建的导航方块。悬停状态下的背景颜色会发生变化

#nav1, #nav2, #nav3
{position: absolute; width:20px; height:20px;  margin-right:7px;}
#nav2 {left: 27px;}#nav3 {left: 54px;}

a.nav:link {color: #fff;background-color: #bfbfc9;}
a.nav:visited, a.nav:hover, a.nav:active {background-color: #979695;}

这些导航包含在动态生成的页面中的div中。我已经使用JQery函数ShowOnlyonTheChosenOne来显示和隐藏页面中显示和隐藏的部分

function showonlyone(thechosenone) {
 $('div[class|="page"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show();
      }
      else {
           $(this).hide();
      }
 });

光标离开导航方块后，无论是悬停在上方还是单击，背景颜色都会更改回其原始状态。我希望当前页面显示时颜色与悬停状态保持相同。我做了详尽的搜索，但似乎没有任何效果。感谢您的帮助。

将此添加到jQuery：

$(this).css('background-color', '#979695');

这实际上会更改您所在div的样式，而不是临时更改：hover。

HTML:

Javascript:

您可能需要将其适应于HTML，但您已经明白了这一点

---

如果您需要更多帮助，请发布您的HTML。

非常感谢！它起作用了。当从外部页面访问该页面时，我需要一个类似的状态，其中导航方块是较暗的背景色。我会努力的。

<ul>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
</ul>

a.nav:visited, a.nav:hover, a.nav:active, a.nav.active {background-color: #979695;}

$('.nav').click(function(){
    // Call your "showonlyone" function
    $(this).addClass('active')
        .parent().siblings()
        .find('a').removeClass('active');
});