css - 通过 <li> anchor 扩展区域

Question

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

这是我的代码: http://jsfiddle.net/4332vo8f/

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

还要确保我们将 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