jquery - HTML TD 可点击

Question

我有一个菜单，您可以在右上角看到 - www.balibar.co

HTML:

    <div id="joinHeader" class="shadow">
            <table id="indexNavigation"><tr>
                <td><a id="navSearch">Search</a></td>
                <td><a id="navLanguages">Languages</a></td>
                <td id="activeNavLink"><a id="navLogin">Login</a></td>
            </tr></table>
    </div>

CSS:

 table#indexNavigation {
width: 100%;
height: 25px;
font-weight: normal;
font-size: 1.1em;
border-collapse: collapse;
 }

 table#indexNavigation td {
text-align: center;
color: white;
width: 33.33%;
border-right: 1px solid #FFF;
cursor: pointer;
 }

table#indexNavigation td#activeNavLink {
border-right: none;
 }

我想让整个 TD 都可以点击。 我添加了光标:指针；到 TD，但它不会亮起，除非在单词上方。 我试着把 <a>外面<td>但这没有用。

是否有使它可点击的技巧。 然后将其连接到 jQuery 以获取点击事件 - 例如:

 $('td#activeNavLink').click(function() {

Answer 1

只需让 td 标签内的链接宽度为 100%。然后它们将占据单元格的整个宽度。

table#indexNavigation td a {
    display: block;
    width: 100%;
    text-align: center;
}