Question

我正在尝试使所有标签都可点击..不仅仅是文字。

我缺少什么想法？

HTML：

<div id="tabs">
<ul class="tabCursos">
    <li class="menuCursos"><a href="#tabs-1">test</a></li>
    <li class="menuCursos"><a href="#tabs-2">test2</a></li>
    <li class="menuCursos"><a href="#tabs-3">test3</a></li>
    <li class="menuCursos"><a href="#tabs-4">test4</a></li>
</ul>

<div class="tabOpen" id="tabs-1">
    test1 test1 test1 test1 test1 test1 test1 test1 test1 test1 
</div>
<div class="tabOpen" id="tabs-2">
    test2 test2 test2 test2 test2 test2 test2 
</div>
<div class="tabOpen" id="tabs-3">
    test3 test3 test3 test3 test3 test3 test3 test3 test3 
</div>
<div class="tabOpen" id="tabs-4">
    test4 test4 test4 test4 test4 test4 test4 test4 test4 
</div>

jQuery的：

$( "#tabs" ).tabs();

Answer 1

你想给链接填充....像

.tab_button{
  padding:50px!important;
}
    <li class="menuCursos"><a href="#tabs-1" class="tab_button">test</a></li>
    <li class="menuCursos"><a href="#tabs-2" class="tab_button">test2</a></li>
    <li class="menuCursos"><a href="#tabs-3" class="tab_button">test3</a></li>
    <li class="menuCursos"><a href="#tabs-4" class="tab_button">test4</a></li>

这将填充文本的可点击区域，使其看起来像是可点击的标签。或者，如果您不想添加类：

.ui-tabs .ui-tabs-nav li a {
  padding-right:50px;
  padding-bottom:10px;
}

Answer 2

调整锚点的大小...

a.ui-tabs-anchor {
    width: 100%;
    padding: .5em 0 .5em 1em;
    text-align: left;
    height: 32px;
}

Answer 3

您只需在链接上指定填充：

小提琴：http://jsfiddle.net/r1nLL5aL/2/

#tabs li a{
padding: 10px 80px 20px 10px;
}

Answer 4

在链接ui-tabs-anchor上使用内置UI类，并通过覆盖类的宽度和高度进行自定义。或复制类代码并根据您的要求进行更改。

Demo

所有标签均可点击，不仅是文字

4 个答案: