Question

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>

JS

$(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"，背景将恢复到正常位置。

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

Answer 1

问题可能是不同的css也影响了元素。这可能是a：访问过的规则，或类似的东西。

最简单（不是最好的）修复方法可能是使用！important：

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

最好的方法是使用调试工具（例如Firebug或Chrome开发者工具）查看元素在工作时应用的样式，以及何时不能按预期工作。这些差异会引导你找到原因。

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

1 个答案: