点击tab改变左边栏

 // 监听标签点击,
    element.on('tab(layadmin-layout-tabs)', function (data) {
        // 切换tab,主体内容切换
        var _index = data.index;
        var layId = $(this).attr('lay-id')
        var currentUl;
        var uiIndex;
        console.log(layId)
        // 显示隐藏iframe
        $(".layui-body .layadmin-tabsbody-item").eq(_index).addClass("layui-show").siblings().removeClass("layui-show");
        //刷新iframe
        $(".layui-body .layadmin-tabsbody-item").eq(_index).find("iframe")[0].contentWindow.location.reload(true);

        //  改变左侧导航栏的选中状态
        var layid = $(this).attr("lay-id");



        // $(currentUl).children('li').each(function (index,item) {
        //     var number = $(item).children('dl').children('dd').length;
        //     if (number > 0) {
        //         //将下拉框中的样式去除
        //         $(item).removeClass('layui-nav-itemed')
        //     }else { //没有子元素
        //         // 将选中样式去除
        //
        //         var layHref = $(item).children('a').attr('lay-href')
        //
        //         if (layHref === layId) {
        //             $(item).addClass('layui-nav-itemed').siblings().removeClass('layui-nav-itemed')
        //         }
        //     }
        // })


        $('.layui-side-scroll li').find("a").each(function (index) {
            $(this).parent().removeClass("layui-this")
            if ($(this).attr("lay-href") === layid) {
                if ($(this).parent().is(".layui-nav-item")) {
                    var tysp =$(this).parent().attr('tyst')
                    $("#"+tysp).css("display", "block").siblings().css("display", "none")
                    $(this).parent().addClass("layui-nav-itemed").siblings().removeClass('layui-nav-itemed')
                    return
                } else {

                    $(this).parent().addClass("layui-this")
                    $(".layui-nav-child").attr("style", "max-height: 0px;")
                    $(".layui-nav-item").removeClass("layui-nav-itemed")
                    $(this).parent().parent().parent().addClass("layui-nav-itemed")
                    $(this).parent().parent().parent().parent().addClass("currentPage")
                    $(this).parent().parent().attr("style", "max-height: 300px;")
                    $(this).parent().addClass("currentPage")
                    $("#"+$(this).parent().parent().parent().attr("tyst")).css("display", "block").siblings().css("display", "none")
                }
            }
        })

        $("#side_menu").children('.layui-side-scroll').find(".layui-nav-tree").each(function (index, item) {
            if ($(item).css("display") === 'block') {
                var indexName = $("#LAY_app_BodyTabs").children().eq(index).children("div").html()
                if ((index === 2 && indexName == "公文新建") || (index === 0 && indexName == "我的办公桌")) {
                    $(".layui-layout ").addClass('hidemenu');
                }else {
                    $(".layui-layout ").removeClass('hidemenu');
                }
                $("#LAY_app_BodyTabs").children().eq(index).addClass("currentPage").siblings().removeClass("currentPage")
            }
        })
        $("#sideMenu").fadeOut(200)
    });

    // 监听tab删除事件
    element.on('tabDelete(layadmin-layout-tabs)', function(data){
        var deleteIndex = data.index;
        $(".layui-body .layadmin-tabsbody-item").eq(deleteIndex).remove()
    });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你需要在 HTML 和 JavaScript 中实现一个选项卡(tab)切换功能。这个功能可以通过以下步骤实现: 1. HTML 结构:创建一个包含多个选项卡的标签(tab bar),每个选项卡都应该有一个唯一的标识符(id)。对应的选项卡内容可以用 div 标签来实现,每个 div 应该与其对应的选项卡具有相同的 id 值。 ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> </div> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>Some content for Tab 1.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>Some content for Tab 2.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>Some content for Tab 3.</p> </div> ``` 2. CSS 样式:定义选项卡和选项卡内容的样式,使其在页面中正确地显示。 ```css /* 隐藏所有选项卡内容 */ .tabcontent { display: none; } /* 定义选项卡按钮的样式 */ .tablinks { background-color: #ddd; color: #333; border: none; outline: none; cursor: pointer; padding: 10px 20px; } /* 定义选项卡按钮被选中时的样式 */ .tablinks.active { background-color: #fff; color: #000; } /* 定义选项卡内容的样式 */ .tabcontent { padding: 20px; } ``` 3. JavaScript 代码:编写一个函数来打开选项卡内容。该函数应该接受两个参数:事件对象和选项卡名称。在函数内部,首先关闭所有选项卡内容,然后显示当前选项卡的内容。 ```javascript function openTab(evt, tabName) { // 获取所有选项卡内容并隐藏它们 var tabcontent = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 获取所有选项卡按钮并将其设置为非激活状态 var tablinks = document.getElementsByClassName("tablinks"); for (var i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // 显示当前选项卡内容并将选项卡按钮设置为激活状态 document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 4. 将 JavaScript 函数绑定到选项卡按钮的点击事件上。 ```html <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> ``` 现在,当用户点击选项卡按钮时,JavaScript 函数将会打开对应的选项卡内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值