使整个选项卡可单击

Question

我正在制作一个在选项卡式界面上依赖很多的模板,为了使它更直观,我想确保用户可以单击选项卡中的任何位置以激活它,而不是单击选项卡内的文本.为了实现这个目标,我现在正在这样做:

<div class="tab" onclick="javascript:window.location='http://example.com';">
    tab text
</div>

对于我创建的所有选项卡.有没有人有更有效的方式来做这件事,他们想与我/社区分享？

Answer 1

如果你这样做会更容易访问:

<div class="tab">
    <a href="..." style="display: block;">tab text</a>
</div>

设置<a>为block让它填充宽度,你可以给它高度,填充等就像一个<div>.你甚至可以<div>完全取消.

<a href="..." class="tab" style="display: block;">tab text</a>

当然,你会加入display: block;,.tab {}但你明白了.

Answer 2

在语义和兼容性方面,使用CSS修改<a>标签更好,你可以尝试这样的事情:

a.tab { display:block; }

然后还设置其他相关属性,如宽度/高度,背景颜色等.

然后你的HTML看起来像这样:

<a class="tab" href="http://example.com">tab text</a>