卡片标签与点击标签时的文字不符？

我试图使用card <div>有它内部的标签，您可以点击卡片标签与点击标签时的文字不符？

您可以查看这里的代码：

CTRL + F“在卡标签”

但是，复制标记源时，卡片中的选项卡不起作用，也不对应于文本。

这里是你可以即插即用成.html让我的问题的代码：

<html> 
<style> 
div.container { 
    margin: 0 auto; 
} 
</style> 
<head> 
<title>Card Launch Page!</title> 
<!-- Compiled and minified CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css"> 

    <!-- Compiled and minified JavaScript --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
</head> 
<body> 
<br /> 
<br /> 
<br /> 
<div class="container"> 
<div class="card"> 
    <div class="card-content"> 
     <p><center>Card Page!</center></p> 
    </div> 
    <div class="card-tabs"> 
     <ul class="tabs tabs-fixed-width"> 
     <li class="tab"><a class="active" href="#test4">Tab 1</a></li> 
     <li class="tab"><a href="#test5">Tab 2</a></li> 
     <li class="tab"><a href="#test6">Tab 3</a></li> 
     </ul> 
    </div> 
    <div class="card-content grey lighten-4"> 
     <div id="test4" class="active" style="display: block;">Test 1 (Corresponds to Tab 1)</div> 
     <div id="test5">Test 2 (Corresponds to Tab 2)</div> 
     <div id="test6">Test 3 (Corresponds to Tab 3)</div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

我的目标是让标签显示相应的文字。举个例子，Tab 1应该只显示Test 1 (Corresponds to Tab 1)。截至目前，这些标签不起作用，所有三行文字都可见。

来源

2017-02-13 Lasagna Cat

Materialise的依赖于拥有jQuery的，你可以从包括：https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

以下是你的代码，但没有改变的工作，通过包括JQuery的使用堆栈溢出代码编辑器功能。

div.container { 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<div class="container"> 
 
<div class="card"> 
 
    <div class="card-content"> 
 
     <p><center>Card Page!</center></p> 
 
    </div> 
 
    <div class="card-tabs"> 
 
     <ul class="tabs tabs-fixed-width"> 
 
     <li class="tab"><a class="active" href="#test4">Tab 1</a></li> 
 
     <li class="tab"><a href="#test5">Tab 2</a></li> 
 
     <li class="tab"><a href="#test6">Tab 3</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="card-content grey lighten-4"> 
 
     <div id="test4" class="active" style="display: block;">Test 1 (Corresponds to Tab 1)</div> 
 
     <div id="test5">Test 2 (Corresponds to Tab 2)</div> 
 
     <div id="test6">Test 3 (Corresponds to Tab 3)</div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-02-13 18:39:00 Kit

谢谢你，你是对的jQuery是必需的。我复制了该Materialise网站的CDN部分下列出的所有内容，但他们将jQuery与CDN的其余部分分开列出。 –

卡片标签与点击标签时的文字不符？

回答

相关问题