0

我有一组工作正常的 JQuery 选项卡——这些选项卡连接到 div 和所有内容。唯一的问题是，除非我将鼠标放在选项卡的文本上，否则它不会将其识别为链接，而只是作为“li”的一部分。令人困惑的是，几乎我见过的每个示例都没有任何我可以轻易看到的额外内容。我几乎可以肯定，我错过了一件愚蠢的事情，但我不知道它是什么。还是我需要添加一些额外的东西来制作整个“li”？

这是代码：

<style type="text/css">
    body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:75%;
    }
    .tabs ul{
        list-style:none;
        padding:0px;
        font-size:14px;
    }
    .tabs li{
        float:left;
        padding:.5em 0em;
        margin:0px .5em 0px 0px;
        width:120px;
        background-color:#ccc;
        text-align:center;
    }
    .tabs li a{
        color:#666;
        text-decoration:none;
    }
    .tabs li.ui-tabs-selected{
        background-color:#999;
    }
    .tabs li.ui-tabs-selected a{
        color:#000;
    }
    .tabs div{
        clear:both;
        background-color:#f0f0f0;
        margin:0px;
        padding:.5em 1em;
    }
    .ui-tabs-hide{
        display:none;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".tabs").tabs();
});
</script>
</head>

<body>
<div class="tabs">
    <ul>
        <li><a href="#tab1">First Tab</a></li>
        <li><a href="#tab2">Second Tab</a></li>
        <li><a href="#tab3">Third Tab</a></li>
    </ul>
    <div id="tab1"><p>This is the first tab.</p></div>
    <div id="tab2"><p>This is the second tab.</p></div>
    <div id="tab3"><p>This is the third tab.</p></div>
</div>
4

3 回答 3

3

添加display:block到您的标签或链接。

于 2012-10-24T20:22:16.317 回答
1

您必须更改 的display属性a，默认情况下它是，inline但您可以将其更改为inline-block

.tabs li a{
    color:#666;
    text-decoration:none;
    display:inline-block;  
}

而且您可能还需要调整高度width和height.

一个例子。

于 2012-10-24T20:22:29.267 回答
0

float:left从您的.tabs li规则中删除并改为width:120px;使用.tabs li a。

jsFiddle 示例

于 2012-10-24T20:26:35.737 回答