HTML TD Clickable

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 Clickable。 我添加了游标：指针;对TD而言，除了超过单词之外，它不会亮起。 我尝试将<a>放在<td>之外，但这不起作用。

是否有诀窍使这个可点击。 然后将它连接到jQuery以进行点击事件 - 例如：

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

Answer 1

只需让td标记内的链接宽度为100％即可。然后它们将占据细胞的整个宽度。

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

Answer 2

您应该在CSS中使用display:block。

以下是带有块链接的无序列表（ul）的示例：link

Answer 3

你有两个选择

1. 仅限css

   这里你实际上让锚标签成为一个块元素，给它全宽和高度，使其与表格单元一样大......

   table td a {
     display: block;
     width: 100%;
     height: 100%;
   }
   

   评论您可能需要将一些填充等从TD元素移到A元素

2. 通过javascript

   这意味着，将click事件添加到td元素，然后从该表格单元格内的锚元素触发点击。

   $('#mytable td').each(function(){
     $(this).css({'cursor': 'pointer'}).click(function(){
       $(this).find('a:first').trigger('click');
     });
   });