我正在制作一个依靠标签界面上的很多模板，为了使它更直观一些，我想确保用户可以点击标签中的任何位置为了激活它，而不是点击标签内的文字。为了实现这一点，我目前正在这样做：使整个标签可点击
<div class="tab" onclick="javascript:window.location='http://example.com';">
tab text
</div>
为我创建的所有选项卡。有没有人有这样做的更有效的方式，他们想与我/社区分享？
，如果你这样做这将是更方便：
<div class="tab">
<a href="..." style="display: block;">tab text</a>
</div>
设置<a>到block让它填补宽度，你可以给它的高度，填充等，就像一个<div>。你甚至可以完全抛弃<div>。
<a href="..." class="tab" style="display: block;">tab text</a>
当然，你要补充display: block;到.tab {}，但你的想法。
由于您打开了一个新窗口，因此除非您想将其放入函数中以缩短输入目的，否则该窗口的效率与您将要获得的效率相近。
它在语义和兼容性方面更好地与CSS这样做修改<一>标签，你可以尝试这样的事：
a.tab { display:block; }
然后还要设置类似宽度其他相关属性/高度，背景颜色等。
然后，而不是你的HTML看起来像这样：
<a class="tab" href="http://example.com">tab text</a>
而不是使用一个< DIV/>标签的，为什么不使用的< A/>适当的造型来匹配什么是目前应用于< DIV/>？这样，您可以使用锚的href属性，而不是诉诸JavaScript来指导用户。
正如John Rasch所提到的，为打字目的制作一个javascript函数可以帮助你，但是......不要让我想！如果它是可点击的，用光标显示它：用手在CSS！
怎么样：
<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>
让您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>
这将导致链路占用标签的整个“身体”，这样你就可以点击任何地方在上面。
PPS：简短的回答是，您可以打开A标签以显示“block”模式，并添加任何填充，并且该填充将捕获点击。浮动元素（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; }
这样做，适应不同的字体大小和可以使用自定义imags的角落和填充选项卡的更先进的，经典的方式是“推拉门”：
你熟悉用Firebug？ – 2009-02-12 22:30:19