Question

我有一组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>

Answer 1

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

Answer 2

您必须更改display的{{1}}属性，默认情况下为a，但您可以将其更改为inline

inline-block

此外，您可能需要调整高度.tabs li a{ color:#666; text-decoration:none; display:inline-block; }和width。

An Example

Answer 3

从float:left规则中移除.tabs li，然后将width:120px;放在.tabs li a上。

<强> jsFiddle example

JQuery Tabs的表面不是完全可点击的

3 个答案: