html - A：空链接无效

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" );
});

我用上面的代码更新了你的小提琴（在这里检查），这也触发了父母的 CSS。:)

Answer 2