私は正常に動作する 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>