Materialise Tabs突然不起作用了

我在几个Rails项目中使用Materialize中的Tabs Javascipt。但突然在我的最后一个项目中它不起作用了（它在之前做了一些提交，但我似乎无法解决它）。Materialise Tabs突然不起作用了

我已经添加了一个demo-snippet（一个来自Materialize，包括intitializer）到一个空白页，以查看它是否与页面相关，但也在此页面上（由另一个控制器控制），它似乎没有上班。

它只显示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

谁能帮我解决此问题？（我可能忽略了一些简单的东西）

来源

2016-07-26 Sebastian Plasschaert

我把Codepen的例子。 http://codepen.io/karlisup/pen/yJEBJg。工作正在进行中。 – karlisup

对我来说，似乎你忘了添加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>

祝你好运队友;）

来源

2016-07-26 09:57:50 karlisup

是的，完美的，解决了它！奇怪的是，最初做的工作，我找不到我已经有这些链接点。但那并不重要，我现在可以继续;） –

Materialise Tabs突然不起作用了

回答

相关问题