Question

我使用jquery-ui创建了一个标签但是当我点击li时它没有更改标签...更改它的唯一方法是单击a锚点本身...

Answer 1

您可以通过将填充从li元素转移到a元素来解决此问题。

让我们删除#tabs ul，#tabs ul li中的填充，以及处于有效状态#tabs li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active时的填充，并将填充添加到#tabs ul li a和#tabs li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a < / p>

另外，请确保我们将display: inline-block添加到#tabs ul li和#tabs ul li a，以便在我们将padding添加到a时展开。

你的css现在应该是这样的：

#tabs{
    border:1px solid #eedcb8;
    width: 850px;
}
#tabs .ui-tabs-panel{
    padding:0px 10px 10px 10px;
}
#tabs ul{
    background-color: #eedab9;
    padding: 0;
    margin: 5px;
}
#tabs ul li{
    display:inline-block;
    list-style-type:none;
}

#tabs ul li a{
    display:inline-block;
    font-family: verdana;
    color:#da8b26;
    text-decoration:none;   
    font-size: 14px;
    padding: 5px 35px 5px 10px;    
}

#tabs ul li.ui-state-active a{
    color:white;
    font-family: verdana;
    text-decoration:none;   
    font-size: 14px;

}

#tabs li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active {
    background-color:#d39025;
    margin-right:10px;
    position:relative;    
    color:white;
}

#tabs li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a {
   padding: 10px 35px 10px 10px;
}

#tabs li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active:after{
   border-style: solid;
    border-width: 0 30px 38px 0;
    border-color: transparent #eedab9 transparent transparent;
    content:"";
    position:absolute;
    top:0;
    right:0;
}

Fiddle

通过<li>锚定扩展区域

1 个答案: