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的時候，除了話語之外，它不會亮起來。 我試圖把外面的，但這不起作用。

有沒有一個技巧讓這個可點擊。然後 將鉤這件事將jQuery的單擊事件 - 例如：

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

THX

Answer 1

你應該在你的CSS使用display:block。

下面是一個無序列表（UL）與塊鏈接的例子：link

Answer 2

只是讓你的鏈接裏面你td標籤有100％的寬度。然後他們將佔據整個單元格的寬度。

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

Answer 3

你有兩個選擇

1. 通過CSS只

   在這裏你實際上使錨標記一個塊元素，給它充分的寬度和高度，使其一樣大表細胞...

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

   句話您可能需要ŧ o移動到一些填充和這樣從TD元件到A元件

2. 由JavaScript

   這意味着，加入點擊事件到td元素，然後觸發來自這是該表內的錨固元件的點擊細胞。

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