使用Tab中的选项卡不起作用 - Material Design Lite [英] Using Tabs within Tab isn't working - Material Design Lite
问题描述
我想在制表符布局中使用制表符布局。我正在使用Material Design lite，它已经为选项卡制作了类，因此我正在尝试使用相同的方法。
标签号码1 - 水平标签可单独使用，没有任何问题。
标签号2 - 垂直标签单独工作，没有任何问题。
现在我尝试在标签号1中使用标签号2。保持不变，但标签号码2不起作用。
请看看这个Plunker链接： https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview
代码 - HTML
<！DOCTYPE html>
< html>
< head>
< link data-require =material-design-lite@1.1.1data-semver =1.1.1 =stylesheethref =https://code.getmdl.io/1.1 .1 / material.indigo-pink.min.css/>
< link rel =stylesheethref =style.css/>
< script src =script.js>< / script>
< / head>
< body>
< h4>标签1内的组合标签2< / h4>
< div class =mdl-tabs mdl-js-tabs>
< div class =mdl-tabs__tab-bar>
< a href =＃tab1class =mdl-tabs__tab>标签一< / a>
< a href =＃tab2class =mdl-tabs__tab>标签页2< / a>
< a href =＃tab3class =mdl-tabs__tab>标签三< / a>
< / div>
< div class =mdl-tabs__panel is-activeid =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-panelclass =mdl-tabs__tab is-active>
< span class =hollow-circle>< / span>一般
< / a>
< a href =＃tab2-panelclass =mdl-tabs__tab>
< span class =hollow-circle>< / span>银行
< / a>
< a href =＃tab3-panelclass =mdl-tabs__tab>
< span class =hollow-circle>< / span>密码
< / a>
< / div>
< / div>
< div class =mdl-cell mdl-cell - 10-col>
< div class =mdl-tabs__panel is-activeid =tab1-panel>
内容1
< / div>
< div class =mdl-tabs__panelid =tab2-panel>
内容2
< / div>
< div class =mdl-tabs__panelid =tab3-panel>
内容3
< / div>
< / div>
< / div>
< / div>
< / div>
< div class =mdl-tabs__panelid =tab2>
< p>第二个标签的内容。< / p>
< / div>
< div class =mdl-tabs__panelid =tab3>
< p>第三个标签的内容。< / p>
< / div>
< / div>
< h4>标签1个人< / h4>
< div class =mdl-tabs mdl-js-tabs>
< div class =mdl-tabs__tab-bar>
< a href =＃tab1class =mdl-tabs__tab>标签一< / a>
< a href =＃tab2class =mdl-tabs__tab>标签页2< / a>
< a href =＃tab3class =mdl-tabs__tab>标签三< / a>
< / div>
< div class =mdl-tabs__panel is-activeid =tab1>
< p>第一个标签的内容。< / p>
< / div>
< div class =mdl-tabs__panelid =tab2>
< p>第二个标签的内容。< / p>
< / div>
< div class =mdl-tabs__panelid =tab3>
< p>第三个标签的内容。< / p>
< / div>
< / div>
< h4>标签2个人< / 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-panelclass =mdl-tabs__tab is-active>
< span class =hollow-circle>< / span>一般
< / a>
< a href =＃tab2-panelclass =mdl-tabs__tab>
< span class =hollow-circle>< / span>银行
< / a>
< a href =＃tab3-panelclass =mdl-tabs__tab>
< span class =hollow-circle>< / span>密码
< / a>
< / div>
< / div>
< div class =mdl-cell mdl-cell - 10-col>
< div class =mdl-tabs__panel is-activeid =tab1-panel>
内容1
< / div>
< div class =mdl-tabs__panelid =tab2-panel>
内容2
< / div>
< div class =mdl-tabs__panelid =tab3-panel>
内容3
< / div>
< / div>
< / div>
< / div>
< / body>
< / html>
/ *垂直制表符* /
.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固体＃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;
如果我猜对了，你已经从这篇文章中获得了垂直标签的代码 Material Design lite中的垂直制表符。我写过那篇文章，并且据我所知，您的问题与垂直制表符无关。如果您在水平制表符中使用水平制表符，您也会遇到同样的问题。
这个问题可能是由于mdl-tabs的javscript代码引起的。原始开发人员可能正在使用选项卡父容器来查找该容器下的每个选项卡并将其单击事件绑定到它。这就是造成问题的原因。
解决方案：不要将点击事件绑定到父项下的子选项卡。您需要更改代码以找到基于点击的标签的最近父标签容器，并根据找到的父标签修改子标签。
可能会压倒性的，但这是我能猜到的事情。
I want to make use of tabs layout within tabs layout. I am using Material Design lite which has already made classes for tabs therefore I am trying to make use of the same.
The Tab Number 1 - Horizontal Tab is working individually without any problem. The Tab Number 2 - Vertical Tab is working individually without any problem.
Now I tried to use tab number 2 within tab number 1. Tab number one's working remain the same but tab number 2 isn't working.
Please take a look at this Plunker link : https://plnkr.co/edit/LVPexb9akrRR2AoPGEGO?p=preview
Code - 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;
}
If I'm guessing right, you have taken the "vertical tab's code" from this article Vertical tabs in Material design lite. I have written that article, and as far as I can understand, your problem is not related to vertical tabs. You will face the same problem if you use horizontal tabs inside horizontal tabs too.
The problem might be occurring due to javscript code of mdl-tabs. Original developers might be using tabs parent container to find each tabs under that container and binding click events to it. That is why creating problem. Unable to understand right now due to minification.
Solution: Instead of binding click event to child tabs under a parent. You need to change the code to find the "Closest" parent tab container based on the tab clicked and modify the child tabs based on the parent tab found.
Might be overwhelming, but that is what I can guess is happening.
这篇关于使用Tab中的选项卡不起作用 - Material Design Lite的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
