0

私は正常に動作する JQuery のタブのセットを持っています。タブは div とすべてに接続します。唯一の問題は、マウスをタブのテキストの上に置かない限り、「li」の一部として、それをリンクとして認識しないことです。紛らわしいのは、私が見たほとんどすべての例に、すぐに確認できる余分なものがないことです。私が見逃している愚かなことが1つだけあることはほぼ確実ですが、それが何であるかはわかりません. または、「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 liwidth:120px;.tabs li a

jsFiddle の例

于 2012-10-24T20:26:35.737 に答える