Tabs - using hover (mouseeneter and leave) and click

Question

I have had problem with using tabs. I tried to implement tabs functionality for example as site http://mashable.com.

Tabs can be hover and show tab content by hover. If I click tab, tab content should be hidden, unvisible UNTIL mouseleave <li>. If I again mouseenter, tab content will be shown.

I have had problem with combine hover and click. With this code, I have problems like:
1. Page load
- if tabs up and down during page load, tab content is shown because of mouseenter despite of click tab
2. Click tab <li>
- clicking tab sometimes tab content is shown, sometimes not - there is no rule; must be not shown
- if tab content is not shown, if I move mouse (I did not mouseleave <li>), somethimes tab content is shown, sometimes not

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

hello instead of using tabs it would be easier to make an ul li and within the li put the content, then use hover() because the div will not hide being a child of 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();
    });
});

Answer 2

First add $(".tabcontent").hide() on page load, so that all contents are hidden by default. Other than that I didn't find any "sometimes it works, sometime not" bugs. Your code works, but its not as on mashable becase content is hidden after I leave or click tab.

Personaly I try to avoid lists becase I find basic structure of divs easier to control from javascript. There are a few ways to create what you want, and it's on the developer to choose what fit him best.

As Lesonaschi said, probably best option is to nest elements (content inside tab div or li), becase then hover function should apply on entire block. But don't take my word for it, try and experiment :)

Answer 3

I didn't post css, maybe css creates problems of elements div, ul, li,...

#tabs {

        width: 950px;

    }

    #tabs ul li a {
    display: block;
    }

    #tabs ul {
        padding: 0;
        margin: 0;
        list-style: none;
        display: block;
    }
    #tabs ul li {
        display: block;
        float: left;
        padding: 2.8px;
        margin: 0px;
        font-size: 15.5px;
        border-right:3px double #cccccc;
        background: #000000 url(/images/tab2.jpg) no-repeat 0px 0px;
        color:#ffffff; 
        text-align: center;
    }

    #tabs ul li:last-child { border-right: none;  }
    #tabs li:first-child + li + li + li + li  + li{border-right:none;}
    #tabcontents {
        clear: both;

    }

    .tabcontent {
        display: none;
        width: 947px;
        height:295px;
        background: #202020;
        position: absolute;
        color:#f0f0f0;
        z-index:9999;
    }


    a.tab_link{
        text-decoration:none;

    }

    a.tab_link:link { 
        color: #ffffff; 
    }

    a.tab_link:visited { 
        color: #f6911b; 
    }

    a.tab_link:hover {
        color: #eeeeee;
    }

    a.tab_link:active {
        color: #f6911b;
    }