javascript - 如何将 CSS block 变成可点击的链接？

Question

在我的网站上，只有标签本身的实际文本是可点击的。我想要做的是让整个 block 都可以点击。

在我的“关于我”选项卡上调用的类是“menu-item menu-item-type-custom menu-item-object-custom menu-item-179”，其他选项卡也是如此，它们只是菜单项编号有不同的编号。

我能找到的包含选项卡的 CSS 是“current-menu-item”。

我看过这个:how to make the whole block clickable?并查看:block level clickable area not working correctly

我的网站:http://travisingram.net/包含“当前菜单项”的 CSS 代码。

.current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f !important;
    border-radius: 3px;
    border: 3px solid #e4b41b;

}
.sf-menu li:hover , /*.sf-menu li.sfHover,*/ .current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f;
    border-radius: 3px;
    border: 3px solid #e4b41b;
}
.sf-menu li ul, .current-menu-item, .sf-menu li:hover, .sf-menu li.sfHover {
    border: none !important
}

感谢您试图帮助大家，但没有任何效果..

Answer 1

block 不像链接的原因是因为它不是链接。不要让 li 成为用户点击的矩形，你应该为 li 内的链接做这个。在你的CSS中设置你的“a”元素来阻止，然后为它们指定一些填充。您将能够在他们的区域内点击。

a{ display:block; padding:10px 20px; }

看这个例子http://jsfiddle.net/NtPAe/