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

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

Ex：http://arkansas.gov/ 右侧面板

Answer 1

您在连接后立即触发鼠标提取。为什么？而不是垂直选项卡上的javascript和你的使用它：将display: none;添加到css中的#vtab > div。

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

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

将Jquery垂直制表符更改为菜单

1 个答案: