我如何添加子菜单到我的选项卡

How can I add sub menu to my tabs?

本文关键字：菜单 我的 选项 何添加 添加      更新时间：2023-09-26

我整个上午都在努力将下拉菜单添加到我页面上的简单选项卡内容中。我想有下拉菜单(包含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>

好了，把我刚才做的擦掉，看看这个。我觉得这对你想要的东西更有效。jsfiddle

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

要编辑活动选项卡的外观，请注意:

.active_tab{
}

和编辑标签内容的外观编辑:

.tabCont{
}

希望这次是对的!

我觉得我在这里做了一些不好的jQuery，但下面的代码听起来像你要的东西:

$('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/

我没有修改您的代码，只是编辑子菜单变量的内容来显示您想要的内容。
另外，我猜您可能希望每个选项卡都有不同的子菜单，但这只是一个起点。

相关文章：