タブをクリックすると、カードのタブはテキストに対応しません。

私はあなたがあなたがここにコードを表示することができますタブをクリックすると、カードのタブはテキストに対応しません。

をクリックすることができ、それの内側のタブがありcard <div>使用しようとしています：

CTRL + F「カードのタブ」

を

ただし、マークアップソースをコピーすると、カード内のタブは機能せず、テキストにも対応しません。

<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>

私の目標は、対応するテキストを表示するには、タブを取得することです。ここでは

は、あなたが私の問題を取得するために、プラグアンド .htmlに遊ぶことができるコードです。たとえば、 Tab 1は Test 1 (Corresponds to Tab 1)と表示されます。現在のところ、タブは機能せず、3行のテキストすべてが表示されます。あなたのコードは以下の https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

が、スタックオーバーフローコードエディタ機能を使用してjQueryのを含めることにより、変更することなく作業：

出典

2017-02-13 Lasagna Cat

マテリアライズは、あなたから含めることができる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を必要としている、ありがとうございます。マテリアライズ・ウェブサイトのCDNセクションにリストされているものすべてをコピーしましたが、CDNの残りの部分とは別にjQueryがリストされていました。 –

タブをクリックすると、カードのタブはテキストに対応しません。

答えて

関連する問題