使整個選項卡可單擊

Question

我正在制作一個在選項卡式界面上依賴很多的模板，為了使它更直觀，我想確保用戶可以單擊選項卡中的任何位置以激活它，而不是單擊選項卡內的文本。 為了實現這個目標，我現在正在這樣做：

<div class="tab" onclick="javascript:window.location='http://example.com';">
    tab text
</div>

對於我創建的所有選項卡。 有沒有人有更有效的方式來做這件事，他們想與我/社區分享？

Answer 1

如果你這樣做會更容易訪問：

<div class="tab">
    <a href="..." style="display: block;">tab text</a>
</div>

設置<a> to block讓它填充寬度，你可以給它高度，填充等，就像<div> 。 你甚至可以完全取消<div> 。

<a href="..." class="tab" style="display: block;">tab text</a>

當然，你要添加display: block; 到.tab {}但是你明白了。

Answer 2

在語義和兼容性方面，使用CSS修改<a>標簽更好，你可以嘗試這樣的事情：

a.tab { display:block; }

然后還設置其他相關屬性，如寬度/高度，背景顏色等。

然后你的HTML看起來像這樣：

<a class="tab" href="http://example.com">tab text</a>

Answer 3

創建a標記塊級元素，然后將選項卡填充放在鏈接上。 例如，如果你有......

<style type="text/css">
    div.tab {
        float: left;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com">tab text</a></div>

......然后改成它......

<style type="text/css">
    div.tab {
        float: left;
        padding: 0;
    }

    div.tab a {
        display: block;
        padding: 10px;
    }
</style>

<div class="tab"><a href="http://example.com">tab text</a></div>

這將導致鏈接占據選項卡的整個“正文”，因此您可以單擊它上面的任何位置。

Answer 4

PPS：簡短的回答是，您可以將A標簽轉為顯示“阻止”模式，並添加任何填充，並且該填充將捕獲點擊。 浮動元素（float：left，float：right）是一個隱式的“display：block”。 “內聯”元素（例如SPAN）也使用填充來確定獲取背景圖像的區域; 但不影響布局。

最簡單的方法是這樣的：

ul.tabs, ul.tabs li { float:left; margin:0; padding:0; list-style:none; }
ul.tabs li a { float:left; padding:4px 10px 4px; border:1px solid blue; border-bottom:none; margin-right:4px; }
.clear { clear:both; /* add width:100%; overflow:hidden; for IE6 pos */ }

<ul class="tabs">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    ...etc...
</ul>
<div class="clear"></div>

如果您為每個選項卡使用相同的寬度（取決於其中最長的文本），那么您甚至可以使用單個gif背景圖像：

ul.tabs li a { /* same above + */ background:url(tab-bg.gif) no-repeat 50% 0; text-align:center; width:120px; }

更高級，更經典的做標簽，適應不同的字體大小，並可以使用自定義圖像的角落和填充是“滑動門”：

http://www.alistapart.com/articles/slidingdoors/

Answer 5

由於你打開了一個新的窗口，這個效果和你要獲得的效率差不多，除非你想把它放到一個函數中來縮短它以便輸入。

Answer 6

為什么不使用具有適當樣式的<a/>來匹配當前應用於<div />的內容，而不是使用<div />標記？ 這樣，您可以使用錨點的href屬性，而不是使用JavaScript來指導用戶。

Answer 7

正如John Rasch所提到的，為打字目的制作一個javascript函數可以幫助你，但也......不要讓我想到！ 如果它的可點擊，用光標顯示：手在css！

Answer 8

怎么樣：

<script type="text/javascript" src="jquery.js">
$(document).ready(function(){
   $(".tab").click(function(event){
     window.location='http://example.com';
   });
 });
</script>

...

<div class="tab">
tab text
</div>

Answer 9

有兩種技術可以實現這一目標

內聯li + a和float li + block a

在這里總結一下

http://www.pagecolumn.com/webparts/making_tabs_with_CSS.htm