- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试了下面的 html 代码来制作选项卡集:
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
JavaScript 是:
<script>
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {?
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
</script>
请帮帮我...问题出在哪里以及如何解决?实际上,Material.io 不提供任何组件的示例完整代码。这就是为什么我完全困惑了。我正在制作一个聊天应用程序,其中需要选项卡。所以,我想你们可以帮助我。如果可能,请提供任何 codepend 或 jsfiddle 演示代码...
最佳答案
删除此行中的 ?
符号:
dynamicTabBar.tabs.forEach(function(tab) {?
并添加一些 CSS 以默认隐藏非事件 panel
block :
var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
var panels = document.querySelector('.panels');
dynamicTabBar.tabs.forEach(function(tab) {
tab.preventDefaultOnClick = true;
});
function updateDot(index) {
var activeDot = dots.querySelector('.dot.active');
if (activeDot) {
activeDot.classList.remove('active');
}
var newActiveDot = dots.querySelector('.dot:nth-child(' + (index + 1) + ')');
if (newActiveDot) {
newActiveDot.classList.add('active');
}
}
function updatePanel(index) {
var activePanel = panels.querySelector('.panel.active');
if (activePanel) {
activePanel.classList.remove('active');
}
var newActivePanel = panels.querySelector('.panel:nth-child(' + (index + 1) + ')');
if (newActivePanel) {
newActivePanel.classList.add('active');
}
}
dynamicTabBar.listen('MDCTabBar:change', function ({detail: tabs}) {
var nthChildIndex = tabs.activeTabIndex;
updatePanel(nthChildIndex);
updateDot(nthChildIndex);
});
dots.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('dot')) {
return;
}
evt.preventDefault();
var dotIndex = [].slice.call(dots.querySelectorAll('.dot')).indexOf(evt.target);
if (dotIndex >= 0) {
dynamicTabBar.activeTabIndex = dotIndex;
}
updatePanel(dotIndex);
updateDot(dotIndex);
});
const MDCTab = mdc.tabs.MDCTab;
const MDCTabFoundation = mdc.tabs.MDCTabFoundation;
const MDCTabBar = mdc.tabs.MDCTabBar;
const MDCTabBarFoundation = mdc.tabs.MDCTabBarFoundation;
mdc.tabs.MDCTabBar.attachTo(document.querySelector('#my-mdc-tab-bar'));
.panel {
display: none;
}
.panel.active {
display: block
}
.dot {
width: 10px;
height: 10px;
display: inline-block;
background: black;
padding: 5px;
}
.dots {
text-align: center;
}
.dot.active {
background: red;
}
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>
<section id="dynamic-demo-toolbar">
<nav id="dynamic-tab-bar" class="mdc-tab-bar" role="tablist">
<a role="tab" aria-controls="panel-1"
class="mdc-tab mdc-tab--active" href="#panel-1">Item One</a>
<a role="tab" aria-controls="panel-2"
class="mdc-tab" href="#panel-2">Item Two</a>
<a role="tab" aria-controls="panel-3"
class="mdc-tab" href="#panel-3">Item Three</a>
<span class="mdc-tab-bar__indicator"></span>
</nav>
</section>
<section>
<div class="panels">
<p class="panel active" id="panel-1" role="tabpanel" aria-hidden="false">Item One</p>
<p class="panel" id="panel-2" role="tabpanel" aria-hidden="true">Item Two</p>
<p class="panel" id="panel-3" role="tabpanel" aria-hidden="true">Item Three</p>
</div>
<div class="dots">
<a class="dot active" data-trigger="panel-1" href="#panel-1"></a>
<a class="dot" data-trigger="panel-2" href="#panel-2"></a>
<a class="dot" data-trigger="panel-3" href="#panel-3"></a>
</div>
</section>
关于javascript - 如何使用 unpkg 作为 MDC CSS 文件和 s 文件的存储在 Web 应用程序上添加 Material Design 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51565721/
这个问题在这里已经有了答案: Why don't Java's +=, -=, *=, /= compound assignment operators require casting? (11 个
我搜索了很多,但没有一个链接能帮助我解决这个问题。我得到了 ORA-21500: internal error code, arguments: [%s], [%s], [%s], [%s], [%s
我正在做 RegexOne 正则表达式教程,它有一个 question关于编写正则表达式以删除不必要的空格。 教程中提供的解决方案是 We can just skip all the starting
([\s\S]+|\s?) 中 |\s? 的目的或作用是什么?如果没有它,表达式会不会与 ([\s\S]+) 相同? 最佳答案 这不是完全相同的。 ([\s\S]+|\s?) 会匹配空字符串,而 ([
这个正则表达式有一组还是两组? 我正在尝试使用第二组访问 bookTitle 但出现错误: Pattern pattern = Pattern.compile("^\\s*(.*?)\\s+-\\s+
在 C 中给定一个字符串指针 s,下面的迭代会做什么?即它以什么方式遍历字符串? for (++s ; *s; ++s); 最佳答案 for (++s ; *s;++s) 表示 将指针 s 递增到字符
我正在用一个 node.js 应用程序解析一个大列表并有这段代码 sizeCode = dbfr.CN_DESC.split('\s+-\s*|\s*-\s+') 这似乎不起作用,因为它返回了 [ '
我正在编写一个简单的字符串连接程序。 该程序按照我发布的方式运行。但是,我首先使用以下代码编写它来查找字符串的结尾: while (*s++) ; 但是,这个方法并没有奏效。我传递给它的字符串
这个问题已经有答案了: What does (?和aramchand来自Mohandas Karamchand G 因此,在使用这些匹配来分割字符串后,您最终会得到 {"M", "K", "G"} 注
我正在尝试转换 Map到 List使用 lambda。 本质上,我想将键和值与 '=' 连接起来之间。这看起来微不足道,但我找不到如何去做。 例如 Map map = new HashMap<>();
我正在经历 K & R,并且在递增指针时遇到困难。练习 5.3(第 107 页)要求您使用指针编写一个 strcat 函数。 在伪代码中,该函数执行以下操作: 将 2 个字符串作为输入。 找到字符串
在下面的代码中,pS 和 s.pS 在最后一行是否保证相等?也就是说,在语句S s = S();中,是否可以确定不会构造一个临时的S? #include using namespace std; s
演示示例代码: public void ReverseString(char[] s) { for(int i = 0, j = s.Length-1; i < j; i++, j--){
我一直在寻找类似于 .NET examples 中的示例的 PowerShell 脚本.取一个 New-TimeSpan 并显示为 1 天 2 小时 3 分钟 4 秒。排除其零的地方,在需要的地方添加
def func(s): s = s + " is corrected" return s string_list = ["She", "He"] for s in string_li
我是 python 的新手。当我在互联网上搜索 lambda 时。我在 lambda_functions 中找到了这个声明. processFunc = collapse and (lambda s:
我最近开始学习正则表达式,并试图为上面的问题写一个正则表达式。如果限制只放在一个字母上(例如不超过 2 个“b”),这并不困难。 那么答案就是:a* c*(b|ε)a* c*(b|ε)a* c* 但是
当我运行 npm install 时出现以下错误,但我无法修复它。 我试过:npm install -g windows-build-tools 也没有修复这个错误 ERR! configure
有很多有趣的haskell网上可以找到片段。 This post可以在 this (awesome) Stack Overflow question 下找到. The author写道: discou
我知道以下三行代码旨在将字符串提取到$ value中并将其存储在$ header中。但是我不知道$value =~ s/^\s+//;和$value =~ s/\s+$//;之间有什么区别。 $val
我是一名优秀的程序员,十分优秀!