logo标签列表

使整个选项卡可点击

javascripthtmlcss
4

我正在制作一个模板，它非常依赖于选项卡界面。为了使其更加直观，我希望确保用户可以在选项卡的任何位置单击以激活它，而不必单击选项卡内部的文本。为了实现这一点，我目前正在进行以下操作：

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

对于我创建的所有选项卡。有没有更有效的方法与我/社区分享？
你熟悉Firebug吗？ - Ben Dunlap
哇，"onlick='javascript:..." 看起来很糟糕。 - webjunkie
3
完全没有帮助的评论，伙计们... - garrow
9个回答
11

如果你这样做，它会更易于访问：

<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>

当然，你会给 .tab {} 添加 display: block;，但是你已经理解了这个意思。

6

从语义和兼容性的角度来看，最好使用CSS修改<a>标签来实现此目的，您可以尝试以下方法：

a.tab { display:block; }

然后设置其他相关属性，如宽度/高度、背景颜色等。

然后你的HTML看起来像这样：

<a class="tab" href="http://example.com">tab text</a>
1
将您的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>

这将导致链接占据选项卡的整个“主体”，因此您可以在其任何位置单击。

1

附言：简短的答案是，您可以将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/

0

由于您正在打开一个新窗口，这已经是您可以得到的最有效的方式了，除非您想将其放入函数中以缩短输入的长度。

0

为什么不使用一个带有适当样式的<a/>标签来替代<div/>标签呢？这样你就可以使用锚点的href属性而不是依赖JavaScript来引导用户了。

0
如John Rasch所述，为打字目的制作JavaScript函数可以帮助您，但也不要让我思考！如果它是可点击的，在CSS中使用cursor：hand显示它！！！
-1
-1

怎么样：

<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接