все вкладки clickable не только текст

Question

Я пытаюсь сделать все вкладки clickable..не только текст.

Любые идеи, что мне не хватает?

DEMO

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

Вам просто нужно указать отступы на самих звеньях:

скрипку: http://jsfiddle.net/r1nLL5aL/2/

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

Answer 2

Вы хотите дать ссылки отступы .... как

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

Изменение размера якоря ...

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

Answer 4

Использование встроенных классов UI на ссылку ui-tabs-anchor и настраивайте, переопределяя ширину и высоту класса. ИЛИ скопируйте код класса и измените его в соответствии с вашими требованиями.

Demo