2

私がやろうとしていることは次のとおりです。

  • ボタンをクリックした後、ページの一部 (実際のボタンが配置されている場所 + いくつかのアイテム) がロールアップ (スライドアップ) され、これが完了した後
  • ユーザーは別のページに移動しています

これまでに行ったコードは次のとおりです (明らかに機能していません)。

<div id="content">
    <div>
        <p>something anything</p>
        ...
    </div>
<a id="roll"><img src="_images/butt-submit.png"></a>

</div>


<script>

$('#roll').click(function() {
     $('#content').animate({
          "width" : "100%",
          "height" : "0px"
         }, function() {
     $(this).load('index2.html');
        });
});

</script>

これで私を助けてもらえますか？

4

4 に答える 4

3

JSFiddleが示すように、これでうまくいくはずです

$("#roll").click(function() {
     $("#content").animate({
          width: "100%",
          height: "0px"
     }, function() {
         window.location.href = "index2.html";
     });
});

ただし、 を使用する代わりに、コードを使用して単純化するanimateこともできます。slideUp

$("#roll").click(function() {
     $("#content").slideUp(function() {
         window.location.href = "index2.html";
     });
});

</p>

location.hrefだけでなく、なぜlocationですか？

ご覧のとおりwindow.location.href、私は簡単に使用できますが、使用しました：

window.location = "index2.html";

これはクロスブラウザでも同様に機能しwindow.locationますが、オブジェクトであるため、より長い表記を使用して特定の文字列プロパティをターゲットにすると、より明確になります。

正しいscriptブロック定義

HTML仕様の要件であるスクリプトブロック言語も提供していないようです。最初の文は、それが必須であると言います:

HTML 4.01
18.2.2 スクリプト言語の指定

ドキュメント内の SCRIPT 要素インスタンスごとにtype 属性を指定する必要があります。

あなたの場合、scriptブロックに言語を指定する必要があることを意味します。そうしないと、そもそもスクリプト ブロックとして認識されない可能性があります。

<script type="text/javascript">
...
</script>
于 2012-11-20T16:02:46.863 に答える
2

ページをcontent要素にロードする場合 (ロード メソッドを使用しているためslideUp())、およびメソッドを使用できますslideDown()。現在、を 0 に設定しているheightため、ロードされたコンテンツは表示されません。

$(function() { // when the DOM is ready
   $('#roll').click(function(event) {
       event.preventDefault() // prevent the default action of the event
       $('#content').slideUp(function() {
            $(this).load('index2.html', function(){ // when load is complete
               $(this).slideDown() // slide down the #content element 
            });
       });
   });
})

ユーザーを別のページにリダイレクトしたい場合は、 を使用できますがwindow.location.href、属性を使用しないのはなぜですかhref:

<a id="roll" href='index2.html'><img src="_images/butt-submit.png"></a>
于 2012-11-20T16:06:36.840 に答える
0

この線

$(this).load('index2.html');

2 番目のページを DOM 要素 (この場合は#roll) にロードする AJAX 用です。あなたが言うように、ユーザーを別のページに連れて行きたい場合は、次を使用します。

window.location = 'index2.html';
于 2012-11-20T16:01:30.250 に答える
0

ユーザーは別のページに移動しています

そのタスクを実行するには、次を使用する必要があります。

location.href = "index2.html"
于 2012-11-20T16:03:11.693 に答える