我在几个 Rails 元素中使用 Materialise 的 Tabs Javascipt。但突然在我的上一个元素中它不再工作了(它确实在一些提交之前工作过,但我似乎无法解决它)。
我已将演示片段(来自 Materialise 的片段,包括初始化器)添加到空白页面以查看它是否与页面相关,但在此页面上(由不同的 Controller 控制)似乎也没有工作。
它只显示 1 个列表中的内容,不显示激活的栏,单击它时,它会跳转到内容列表中的 div。
这是我的简单“关于”页面:
<h3>About Us</h3>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
<script>
$(document).ready(function(){
$('ul.tabs').tabs();
});
</script>
...这是该页面的链接: About Page
谁能帮我解决这个问题吗? (我可能忽略了一些简单的事情)
最佳答案
对我来说,您似乎忘记添加 jQuery 和具体化 JavaScript 库。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
两个例子:
- codepen
- 下面的 StackOverflow
有效。确保在 Materialize 之前添加 jQuery。
$(document).ready(function(){
$('ul.tabs').tabs();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
祝你好运,伙计;)
关于javascript - Materialise 选项卡突然不再工作了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38586146/