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>设置为block可让它填充宽度，您可以像<div>一样给它高度，填充等。你甚至可以完全取消<div>。

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

当然，您可以将display: block;添加到.tab {}但是您明白了。

Answer 2

在语义和兼容性方面，修改＆lt; a＆gt;会更好。使用CSS标记来执行此操作，您可以尝试这样的事情：

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

而不是使用＆lt; div /＆gt;标签，为什么不使用＆lt; a /＆gt;使用适当的样式来匹配当前应用于＆lt; div /＆gt;的内容这样，您可以使用锚点的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 +阻止

总结这里

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

使整个选项卡可单击

9 个答案: