タブの使用に問題がありました。たとえば、サイトhttp://mashable.comとしてタブ機能を実装しようとしました。
タブをホバーして、ホバーでタブのコンテンツを表示できます。タブをクリックすると、タブのコンテンツが非表示になり、until mouseleave が表示されなくなります<li>。もう一度マウス入力すると、タブの内容が表示されます。
ホバーとクリックの組み合わせに問題がありました。このコードには、次のような問題
が
あり
ます
。ルールはありません。表示してはいけません
- タブの内容が表示されていない場合、マウスを動かすと (私は mouseleave をしませんでした)、タブの内容が表示される場合と表示されない場合があります<li> <li>
HTML:
<div id="tabs">
<ul id="tabstest">
<li id="tab1" class="tab" onclick="location.href='\ttest1.php';" style="cursor:pointer;"><strong>Test 1</strong></li>
<li id="tab2" class="tab"> <a href="/Test/test2.php" class="tab_link" ><strong><br>Test 2</strong></a></li>
<li id="tab3" class="tab"> <a href="/Test/test3.php" class="tab_link" ><strong>Test 3</strong></a></li>
<li id="tab4" class="tab" onclick="location.href='\ttest4.php'; " style="cursor:pointer;" ><strong><br>Test 4</strong></li>
<li id="tab5" class="tab"> <a href="/Test/test5.php" class="tab_link" ><strong><br>Test 5</strong></a></li>
<li id="tab6" class="tab"> <a href="/Test/test6.php" class="tab_link" ><strong><br>Test 6</strong></a></li>
</ul>
</div>
<div id="tabcontents">
<div id="tab1content" class="tabcontent">
<p>tab1 content</p>
</div>
<div id="tab2content" class="tabcontent">
<p>tab2 content</p>
</div>
<div id="tab3content" class="tabcontent">
<p>tab3 content</p>
</div>
<div id="tab4content" class="tabcontent">
<p>tab4 content</p>
</div>
<div id="tab5content" class="tabcontent">
<p>tab5 content</p>
</div>
<div id="tab6content" class="tabcontent">
<p>tab6 content</p>
</div>
</div>
JQuery:
$(window).load(function(){
$(".tab").focus(function() {
var tabId = $(this).attr('id');
$("#" + tabId + "content").hide();
});
$(".tabcontent").focus(function() {
$(this).hide();
});
$(".tab").click(function() {
var tabId = $(this).attr('id');
$("#" + tabId + "content").hide();
});
$(".tabcontent").click(function() {
$(this).hide();
});
$(".tab").mouseenter(function() {
var tabId = $(this).attr('id');
$("#" + tabId + "content").show();
});
$(".tabcontent").mouseenter(function() {
$(this).show();
});
$(".tab").mouseleave(function() {
var tabId = $(this).attr('id');
$("#" + tabId + "content").hide();
});
$(".tabcontent").mouseleave(function() {
$(this).hide();
});
});