文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在选项卡中使用选项卡不是working Material Design Lite

问在选项卡中使用选项卡不是working Material Design Lite
EN

Stack Overflow用户
提问于 2016-04-19 00:52:20
回答 2查看 1.1K关注 0票数 2

我想在标签布局中使用标签布局。我正在使用Material Design lite，它已经为选项卡创建了类，因此我正在尝试使用相同的类。

标签编号1-水平标签可以单独使用，没有任何问题。Tab Number 2- Vertical Tab单独工作没有任何问题。

现在我尝试在标签号1中使用标签号2。标签号1的工作状态保持不变，但标签号2不起作用。

请看一下这个插销链接：https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview

代码- HTML

代码语言：javascript
复制
    <!DOCTYPE html>
<html>

<head>
    <link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link data-require="material-design-lite@1.1.1" data-semver="1.1.1" rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css" />
    <script data-require="material-design-lite@1.1.1" data-semver="1.1.1" src="https://code.getmdl.io/1.1.1/material.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>

    <h4>Combined Tab 2 within Tab 1</h4>
    <div class="mdl-tabs mdl-js-tabs">
        <div class="mdl-tabs__tab-bar">
            <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
            <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
            <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
        </div>
        <div class="mdl-tabs__panel is-active" id="tab1">
            <div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
                <div class="mdl-grid mdl-grid--no-spacing">
                    <div class="mdl-cell mdl-cell--2-col">
                        <div class="mdl-tabs__tab-bar">
                            <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                                <span class="hollow-circle"></span> General
                            </a>
                            <a href="#tab2-panel" class="mdl-tabs__tab">
                                <span class="hollow-circle"></span> Bank
                            </a>
                            <a href="#tab3-panel" class="mdl-tabs__tab">
                                <span class="hollow-circle"></span> Password
                            </a>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--10-col">
                        <div class="mdl-tabs__panel is-active" id="tab1-panel">
                            Content 1
                        </div>
                        <div class="mdl-tabs__panel" id="tab2-panel">
                            Content 2
                        </div>
                        <div class="mdl-tabs__panel" id="tab3-panel">
                            Content 3
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mdl-tabs__panel" id="tab2">
            <p>Second tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab3">
            <p>Third tab's content.</p>
        </div>
    </div>

    <h4>Tab 1 Individual</h4>
    <div class="mdl-tabs mdl-js-tabs">
        <div class="mdl-tabs__tab-bar">
            <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
            <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
            <a href="#tab3" class="mdl-tabs__tab">Tab Three</a>
        </div>
        <div class="mdl-tabs__panel is-active" id="tab1">
            <p>First tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab2">
            <p>Second tab's content.</p>
        </div>
        <div class="mdl-tabs__panel" id="tab3">
            <p>Third tab's content.</p>
        </div>
    </div>

    <h4>Tab 2 Individual</h4>

    <div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <div class="mdl-grid mdl-grid--no-spacing">
            <div class="mdl-cell mdl-cell--2-col">
                <div class="mdl-tabs__tab-bar">
                    <a href="#tab1-panel" class="mdl-tabs__tab is-active">
                        <span class="hollow-circle"></span> General
                    </a>
                    <a href="#tab2-panel" class="mdl-tabs__tab">
                        <span class="hollow-circle"></span> Bank
                    </a>
                    <a href="#tab3-panel" class="mdl-tabs__tab">
                        <span class="hollow-circle"></span> Password
                    </a>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--10-col">
                <div class="mdl-tabs__panel is-active" id="tab1-panel">
                    Content 1
                </div>
                <div class="mdl-tabs__panel" id="tab2-panel">
                    Content 2
                </div>
                <div class="mdl-tabs__panel" id="tab3-panel">
                    Content 3
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Css

代码语言：javascript
复制
/*Vertical Tabs*/
.vertical-mdl-tabs {
    margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: 35px;
    height: inherit;
    border-bottom: none;
    border-right: 1px solid #d9d9d9;
}

.vertical-mdl-tabs .mdl-tabs__tab {
    width: 100%;
    height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    letter-spacing: 2px;

}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
    border-right: 2px solid #EF5350;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
    content: inherit;
    height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
    padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
    text-align: left;
}
html
css
tabs
material-design-lite
EN

回答 2

Stack Overflow用户

发布于 2016-05-03 02:45:08

如果我猜对了，您从本文Vertical tabs in Material design lite中获取了“垂直制表符的代码”。这篇文章是我写的，据我所知，您的问题与垂直选项卡无关。如果你在水平选项卡中使用水平选项卡，你也会面临同样的问题。

问题可能是由于mdl-tabs的javscript代码引起的。原始开发人员可能会使用选项卡父容器来查找该容器下的每个选项卡，并将单击事件绑定到该容器。这就是为什么要制造问题。由于缩写，现在无法理解。

解决方案:代替将单击事件绑定到父级下的子选项卡。您需要更改代码，以便根据单击的选项卡找到“最接近”的父选项卡容器，并根据找到的父选项卡修改子选项卡。

这可能是压倒性的，但这就是我所能猜到的。

票数 1
EN

Stack Overflow用户

发布于 2019-03-25 10:09:08

我注意到MDL中的嵌套标签被破坏了。选择内部选项卡时，将取消选择所有其他选项卡-包括外部选项卡，因此不会在外部选项卡上选择任何选项卡，而内部选项卡将消失。

我发现如果我使用JS“程序化地”添加内部选项卡，那么这个bug就不会发生。执行此操作时，您必须记住使用componentHandler.upgradeElement(myInnerTabs);升级内部选项卡

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/36699871

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档