1

これは私が書いた最初のJavaScriptコードであり、問​​題が発生しています。他のリンクの内容を非表示にしながら、クリック時にリンクの追加情報を表示する垂直メニューを作成中です。関数に.animate'slow'javascriptを追加したいのですが、問題があります。これは私が持っているものです：

<script type="text/javascript">
function reveal(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'block';
e.style.opacity= '1';
    }
 </script>

 <script type="text/javascript">
 function hide(id) {
   var e = document.getElementById(id);
   if(e.style.display== 'block')
e.style.display= 'none';
   else
e.style.display= 'none';
    }
 </script>

'animate'タグを挿入する方法をいくつか試しましたが、取得できないようです。助けていただければ幸いです。

4

1 に答える 1

1

フィドルを見ると、非常に紛らわしいようです。今のところ使用できるコードのよりクリーンなセットを思いつきましたが、学ぶべきことがたくさんあります。Fiddle が追加されましたhttp://jsfiddle.net/KMDjR/7/ jquery を呼び出すようにしてください (fiddle では左側で呼び出されますが、ページでは以下のコードが示すように自分で呼び出す必要があります)。

<html>
<head>

<style>
#foo{
display: none;
}

#poo{
display: none;
}
</style>
<!-- calling jquery  -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.toggleFoo').live('click', function() {
        $('#foo').fadeIn(1000);
        $('#poo').fadeOut(1000);
    });

    $('.togglePoo').live('click', function() {
        $('#poo').fadeIn(1000);
        $('#foo').fadeOut(1000);
    });

});
</script>
</head>
    <body>
        <a href="#" class="toggleFoo">Click here to toggle visibility of element #foo</a><br /><br />
        <div id="foo">This is foo</div>

        <a href="#" class="togglePoo">Click here to toggle visibility of element #poo</a><br /><br />
        <div id="poo">This is poo</div>
</body>
</html>
于 2012-05-11T18:38:44.930 に答える