1

最初に、javascript を使用して html でタブ コンテンツを作成し、それをドロップダウン コンテンツに転送します。私の問題は、コンテンツをドロップする速度をどのように設定できるかです。この問題をどのように解決できるか、サンプルまたはアイデアを教えてください。返信いただきありがとうございます。

これは私のサンプルコードです:

<html>
<head>
<script type="text/javascript">
function sample(){
if(document.getElementById("cute").style.display=="none"){
document.getElementById.("cute").style.display="";
 document.getElementById.("ugly").style.display="none";
  document.getElementById.("good").style.display="none";
}
}

function samplez(){
if(document.getElementById("good").style.display=="none"){
document.getElementById.("good").style.display="";
 document.getElementById.("cute").style.display="none";
  document.getElementById.("ugly").style.display="none";
}
}

function samplex(){
if(document.getElementById("ugly").style.display=="none"){
document.getElementById.("ugly").style.display="";
 document.getElementById.("cute").style.display="none";
  document.getElementById.("good").style.display="none";
}
}
</script>
</head>

本文コードは次のとおりです。

<body>

<ul>
<li><a href="#" onclick="return false; sample();">Sample</a></li>
 <p id ="cute" style = "display:none;">This is sample 1.</p>
<li><a href="#" onclick="return false; samplex();">Sample x</a></li>
 <p id ="good" style = "display:none;">This is sample 2.</p>
<li><a href="#" onclick="return false; samplez();">Sample z</a></li>
 <p id ="ugly" style = "display:none;">This is sample 3.</p>
</ul>

</body>
</html>

私の質問は、リンクをクリックした場合のドロップダウン ビューの速度を設定する方法です。

4

2 に答える 2

0

setTimeout を使用します。詳細はこちら: http://www.w3schools.com/jsref/met_win_settimeout.asp

于 2013-06-23T05:37:09.723 に答える
0

html5 アニメーションが役立つかもしれません。詳細を確認してください。または、 setTimeoutを 使用して 1 ミリ秒ごとに (好きなだけ) css の高さの値を増やして、アニメーションを表示することもできます。 

var dropDown = function() {
  var ele = document.getElementById("xxx");    
  var h = ele.style.height;
  ele.style.height = parseInt(h.substring(0, h.length-2)) + 2 + "px";
  setTimeout(dropDown, 1);
};
setTimeout(dropDown, 1);
于 2013-06-23T05:26:40.173 に答える