卡片標籤與點擊標籤時的文字不符？

我試圖使用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的其餘部分分開列出。 –

卡片標籤與點擊標籤時的文字不符？

回答

相關問題