Question

整个上午我一直在努力将下拉菜单添加到我页面上的简单标签内容中。我想在用户点击标签时显示下拉菜单（包含4个项目）。然后，下拉菜单应保持可见，直到用户点击另一个标签页。

知道如何将其实现到下面吗？我想这很容易......

非常感谢！

<style type="text/css">
            ul.tabs {
            margin: 0;
            padding: 0;
            float: left;
            list-style: none;
            height: 32px;
            border-bottom: 1px solid #e9e9e9;
            border-left: 1px solid #e9e9e9;
            width: 100%;
            }
            ul.tabs li {
            float: left;
            margin: 0;
            cursor: pointer;
            padding: 0px 21px ;
            height: 31px;
            line-height: 31px;
            border: 1px solid #e9e9e9;
            border-left: none;
            font-weight: bold;
            background: #EEEEEE;
            overflow: hidden;
            position: relative;
            }
            ul.tabs li:hover {
            background: #4b4b4b;
            }
            ul.tabs li.active{
            background: #FFFFFF;
            border-bottom: 1px solid #FFFFFF;
            }
            .tab_container {
            border: 1px solid #e9e9e9;
            border-top: none;
            clear: both;
            float: left;
            width: 100%;
            background: #FFFFFF;
            }
            .tab_content {
            padding: 20px;
            font-size: 13px;
            font-family: arial;
            color: #4b4b4b;
            display: none;
            }
        </style>

        <script type="text/javascript">

    $(document).ready(function() {

        $(".tab_content").hide();
        $(".tab_content:first").show(); 

        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".tab_content").hide();
            var activeTab = $(this).attr("rel"); 
            $("#"+activeTab).fadeIn(); 
        });
    });
    </script>

    <html>
    <ul class="tabs">
    <li class="active" rel="tab1">TAB1</li>
    <li rel="tab2">TAB2</li>
    <li rel="tab3">TAB3</li>
    </ul>
    </html>

Answer 1

好吧，抓住我刚刚做的事情并检查一下。我认为它可能会更好地满足您的需求。 jsfiddle

如果您愿意，可以将a标签更改为li！

编辑活动标签的外观，请注意：

.active_tab{
}

并编辑标签内容编辑的外观：

.tabCont{
}

希望这次是对的！

Answer 2

我觉得我在这里做了一些不好的事情，但是下面的代码听起来就像你想要的那样：

$('li').on('mouseover', function()
{
    var subMenu = '<ul id="subM" style="padding-left:'+this.offsetLeft+'px"> <li>First</li> </ul>';
    if(!$('#subM').length > 0)
    {
        $('body').append(subMenu);
    }
});

$('li').on('mouseout', function()
    {
        if($('#subM').is(':hover'))
        {
            $('#subM').on('mouseout', function()
            {
                $('#subM').remove();
            });
        }
        else
        {
            $('#subM').remove();      
        }
    });

JsFiddle：http://jsfiddle.net/7s5szjkh/

我已经离开了您未触及的代码，只需编辑子菜单变量的内容即可显示您想要的内容。
另外我猜你可能想要每个标签不同的子菜单，但这只是一个起点。

如何在子选项卡中添加子菜单？

2 个答案: