当href重定向链接时更改锚标记背景onclick答案

【问题标题】：Change anchor tag background onclick when href is redirecting link当href重定向链接时更改锚标记背景onclick
【发布时间】：2014-02-06 16:00:20
【问题描述】：

HTML

<div id="main_menu">
    <ul>
        <li><a href="#">Main Page</a></li>               
        <li><a href="<?php echo $this->url(array('controller' => 'eftrqsthead','action' => 'new'), 'default', true) ?>">EFT Request Head</a></li>              
        <li><a href="<?php echo $this->url(array('controller' => 'eftrecvhead','action' => 'new'), 'default', true) ?>">EFT Receive Head</a></li>             
    </ul>          
</div>

$(document).ready(function(){
    $('#main_menu a').click(function(){
        $(this).addClass('tabSelect');
        $(this).siblings().removeClass('tabSelect');
    });
});

CSS

#main_menu ul li a:hover, 
#main_menu ul li a.tabSelect{
    background:url(../images/main_menu_bg_hover.gif) repeat-x;
}

我在这里尝试的是在单击后更改锚标记的背景。问题是如果a href="#" 工作正常，但如果a href="some link"，背景恢复到正常位置。

我该如何处理这种情况？谢谢。

【问题讨论】：

能否将您的代码发布到 jsfiddle.net 上，以便我们为您提供帮助。
您可以尝试在链接上使用:visited，请参阅here for more info
尝试使用 background:url(../images/main_menu_bg_hover.gif) repeat-x !important;
事实上，当页面重定向到链接时，类又恢复为空。

标签： jquery html css href

【解决方案1】：

问题可能是不同的 css 也影响了元素。这可以是 a:visited 规则或类似规则。

修复它的最简单（本身不是最好的）方法可能是使用 !important:

#main_menu ul li a.tabSelect{
    background:url(../images/main_menu_bg_hover.gif) repeat-x !important;
}

最好的方法是使用调试工具（例如 Firebug 或 Chrome 开发者工具）来查看元素在工作时应用了哪种样式，以及当它没有按预期工作时。差异将引导您找到原因。

【讨论】：