2017-06-25 6 views
0

私はこの単純なtyped.jsアニメーションを使ってテキストを表示し、それを削除して別の文字列を入力します。 navbarリンクをクリックすると、このアニメーションが読み込まれるようにしたいと思います。そうclick jqueryの入力アニメーションをロードする

<div class="container blue circleBehind"> 
<a href="#" onclick="return show('page1','page2','page3');">TUTORIAL 1</a> 
<a href="#" onclick="return show('page2','page1','page3');">TUTORIAL 2</a> 
<a href="#" onclick="return show('page3','page1','page2')";>TUTORIAL 3</a> 

</div> 
<div class="element" id="page3" style="display:none"> 
</div> 


document.addEventListener("DOMContentLoaded", function(){ 
    Typed.new(".element", { 
     strings: ["first sentence", "Second sentence."], 
     typeSpeed: 0 
    }); 
}); 

最初の型付き文:「最初の文」をロードするとすぐページが読み込まとして、私はチュートリアル3ボタンをクリックしたときにロードしたいと思います。

答えて

0

これは何か?

function setString(arg){ 
 
    var a=arg.innerHTML; 
 
    Typed.new(".element", { 
 
     strings: [a, "This is second"+a], 
 
     typeSpeed: 2 
 
    }); 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.7/typed.min.js"></script> 
 
<div class="container blue circleBehind"> 
 
<a href="#" onclick="setString(this);">TUTORIAL 1</a> 
 
<a href="#" onclick="setString(this);">TUTORIAL 2</a> 
 
<a href="#" onclick="setString(this);">TUTORIAL 3</a> 
 

 
</div> 
 
<div class="element" id="page3" > 
 
</div>

関連する問題