HTML TD可點擊

我中有你可以在右上角看到一個菜單 - www.balibar.coHTML TD可點擊

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

來源

2011-09-26 Adam

你不能讓'' – Olli

這確實應該是一個列表，而不是一個表。 – graphicdivine

雅我正在使用一個列表，但表格只是坐在... – Adam

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

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

來源

2011-09-26 12:40:30 johankj

這並沒有真正回答這個問題。 –

我同意:) :) :) – Adam

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

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

來源

2011-09-26 12:43:33

抱歉不起作用...拋出格式化 – Adam

你在說什麼格式？ –

等一下，我想我明白了 - 我忘了我的css定義中的'a'。 –

-1

你有兩個選擇

通過CSS只

在這裏你實際上使錨標記一個塊元素，給它充分的寬度和高度，使其一樣大表細胞...
```
table td a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 
```
句話您可能需要ŧ o移動到一些填充和這樣從TD元件到A元件

由JavaScript

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

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

來源

2011-09-26 12:57:12 Sander

絕對沒有理由使用JavaScript來做到這一點，並推薦不必要的JavaScript幾乎從來沒有好建議。 –

呃OP自己要求通過JavaScript來做到這一點，爲了公平我給了這兩個選項！從來沒有說過使用額外的JavaScript比只使用CSS更好。並坦率地說，JavaScript是唯一支持css的東西，它可以在任何地方工作，它的css取決於佈局以及你需要使用哪些瀏覽器。 – Sander

給我一個例子，其中css解決方案不起作用。 –

HTML TD可點擊

回答

相關問題