将Jquery垂直选项卡更改为菜单

Question

Referring from http://mehdi.biz/blog/2010/02/05/vertical-tabs-for-jquery-lovers/

i know it's very easy but i couldn't able to find a solution.. Just want to hide panel(content) when users move their mouse out from that icons.(Acting like a menu not like tabs don't want an active tab.)

How can i add that jquery code?

var $items3 = $('#vtab>ul>li');
$items3.mouseleave(function()
        {                           
        $('#vtab>div').hide();  
        }).mouseleave();

tried that code..it hides the tabs so i cant visit content of panel..

Ex: http://arkansas.gov/ panel at right side

Answer 1

You are triggering the mouseleave right after you have attached it. Why? Instead of the javascript on vertical-tabs and yours use this: Add display: none; to #vtab > div in the css.

    var $items = $('#vtab>ul>li');
    var $contents = $('#vtab>div');
    $items.on('mouseenter', function() {
        $items.removeClass('selected');
        $(this).addClass('selected');
        $contents.hide();
        var index = $items.index($(this));
        $contents.eq(index).show();
    });
    $('#vtab').on('mouseleave', function(){
        $items.removeClass('selected');
        $contents.hide();
    });

try it here . This will only display the tab content and select the tab on mouseenter and hide the content and de-select the tab on mouseleave.