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

Question

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

我知道这很容易，但我找不到解决方案。当用户将鼠标从图标上移开时，我只想隐藏面板（内容）。（像菜单一样不喜欢标签不想要活动标签.)

如何添加该 jquery 代码？

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

尝试了该代码..它隐藏了标签，所以我无法访问面板的内容..

例如： http: //arkansas.gov/ 右侧的面板

Answer 1

您在附加鼠标后立即触发鼠标离开。为什么？而不是垂直选项卡上的javascript和你的使用这个：display: none;在#vtab > divcss中添加。

    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();
    });

在这里试试。这将仅显示选项卡内容并在 mouseenter 上选择选项卡并隐藏内容并在 mouseleave 上取消选择选项卡。