选项卡 - 使用悬停（鼠标进入和离开）并单击

Question

我在使用标签时遇到了问题。我试图实现标签功能，例如站点http://mashable.com。

选项卡可以悬停并通过悬停显示选项卡内容。如果我单击选项卡，选项卡内容应该被隐藏，不可见直到 mouseleave <li>。如果 我再次鼠标输入，标签内容将显示出来。

我遇到了组合悬停和点击的问题。使用此代码，我遇到以下问题：
1. 页面加载
- 如果在页面加载期间上下选项卡，尽管单击选项卡，但由于 mouseenter 会显示选项卡内容
2. 点击标签<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();
    });
}); 

Answer 1

你好，而不是使用制表符，创建一个 ul li 并在 li 中放置内容会更容易，然后使用 hover() 因为 div 不会隐藏为 li 的子级

<div id="tabs">
<ul id="tabstest">
    <li id="tab1" class="tab" onclick="location.href='\ttest1.php';"  style="cursor:pointer;">
        <strong>Test 1</strong>
        <div id="tab1content" class="tabcontent">
            <p>tab1 content</p>
        </div>  
    </li>
    <li id="tab2" class="tab" <a href="/Test/test2.php" class="tab_link" >
        <strong><br>Test 2</strong></a>
        <div id="tab2content" class="tabcontent">
            <p>tab2 content</p>
        </div>   
    </li>
    <li id="tab3" class="tab" <a href="/Test/test3.php" class="tab_link" >
        <strong>Test 3</strong></a>
        <div id="tab3content" class="tabcontent">
            <p>tab3 content</p>
        </div>
    </li>
    <li id="tab4" class="tab" onclick="location.href='\ttest4.php'; " style="cursor:pointer;" >
        <strong><br>Test 4</strong>
         <div id="tab4content" class="tabcontent">
            <p>tab4 content</p>
        </div>    
    </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>

jquery:

$(function(){
    $("#tabstest li").hover(function(){
        $(this).children("div").show();
    },function(){
        $(this).children("div").hide();
    });
});