Question

我在几个Rails项目中使用了Materialise中的Tabs Javascipt。但突然之间，在我的上一个项目中，它不再起作用（它确实在一些提交之前工作，但我似乎无法解决它。）

我已经将一个demo-snippet（Materialise中的一个，包括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

任何人都可以帮我解决这个问题吗？（我可能忽略了一些简单的事情）

Answer 1

对我来说，似乎你忘了添加jQuery＆amp;实现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

的工作原理。确保在Materialise之前添加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>

祝你好运伴侣;）

Materialise Tabs突然不再起作用了

1 个答案: