我想在选项卡布局中使用选项卡布局。我正在使用 Material Design lite，它已经为选项卡创建了类，因此我试图使用它们。
Tab Number 1 - Horizontal Tab 单独工作没有任何问题。 Tab Number 2 - Vertical Tab 单独工作没有任何问题。
现在我尝试在标签 1 中使用标签 2。标签 1 的工作保持不变，但标签 2 不工作。
请查看此 Plunker 链接:https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview
代码 - HTML
<!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
/*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;
}
最佳答案
如果我猜对了，您已经从这篇文章中获取了“垂直标签的代码”Vertical tabs in Material design lite .我写了那篇文章，据我所知，你的问题与垂直制表符无关。如果您也在水平选项卡内使用水平选项卡，您将面临同样的问题。
问题可能是由于 mdl-tabs 的 javscript 代码引起的。原始开发人员可能正在使用选项卡父容器来查找该容器下的每个选项卡并将点击事件绑定(bind)到它。这就是为什么制造问题。由于缩小，现在无法理解。
解决方案:而不是将点击事件绑定(bind)到父级下的子选项卡。您需要更改代码以根据单击的选项卡找到“最近的”父选项卡容器，并根据找到的父选项卡修改子选项卡。
可能会让人不知所措，但我猜这是正在发生的事情。
关于html - 在选项卡中使用选项卡不起作用 - Material Design Lite，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36699871/