Question

我有一个带有链接按钮的表，它不会加载新页面，但它们只是使用onclick事件来隐藏/显示另一个表。但是我需要突出显示一个处于活动状态的按钮，但它不起作用/当您单击并按住鼠标时按钮会突出显示，但是当您放下鼠标时它会再次消失。

<div class="category2"><a href="#" onclick="showStuff('tabulka-adidas'); return false;">Adidas</a></div>
<div class="category2"><a href="#" onclick="showStuff('tabulka-nike'); return false;" >Nike</a></div>
<div class="category2"><a href="#" onclick="showStuff('tabulka-everlast'); return false;">Everlast</a></div>

在这里看小提琴 http://jsfiddle.net/LnqbU/11/

如何突出显示当前有效按钮？

由于

Answer 1

a:active是单击链接时触发的样式（当您按住鼠标按钮时）。

你想要什么，你需要Javascript或jQuery来为链接添加一个“活动”类。例如，使用jQuery：

HTML：

<div class="category2"><a class="linkButton" href="#" onclick="showStuff('tabulka-adidas'); return false;">Adidas</a></div>
<div class="category2"><a class="linkButton" href="#" onclick="showStuff('tabulka-nike'); return false;" >Nike</a></div>
<div class="category2"><a class="linkButton" href="#" onclick="showStuff('tabulka-everlast'); return false;">Everlast</a></div>

jQuery的：

$(".linkButton").on("click", function() {
    $(".linkButton").removeClass( "active" );
    $(this).addClass( "active" );
});

我用上面的代码（check here）更新了你的小提琴，它也触发了父亲的CSS。：）

Answer 2

单击并按住鼠标时，按钮会突出显示，但是当您放下鼠标时，它会再次淡出。

那是因为:active是defined：

“：在用户激活元素时应用：active伪类。例如，在用户按下鼠标按钮并释放它的时间之间。“

如何突出显示当前有效按钮？

由于您已经在使用JavaScripot，为什么不在它“活动”时给它一个类并通过它来格式化？

（当然，当新的元素被激活时，从先前激活的元素中删除该类。）

答：空链接无效

2 个答案: