1

簡単なタブをいくつか作成したいと思います。

コンテンツの異なる3 つdivの s があり、2 番目の 2 つの s にマイナスのトップマージンを設定して、それらを互いに重ねて配置しましたdiv。

次に、3 つのタブがあり、コードを設定して、クリックしたときに#tab1 .fadein content1.

例：

$(document).ready(function() {
  $(".content-kidsclub").hide();
  $("#tab1").click(function() {
    $(".content-kidsclub").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-computersuite").hide();
  $("#tab2").click(function() {
    $(".content-computersuite").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-education-assistance").hide();
  $("#tab3").click(function() {
    $(".content-education-assistance").fadeTo("slow", 1.0);
  });
});

それぞれを初めてクリックすると、うまく機能します。しかし、その後は止まります。また、最初に tab2 をクリックすると、マイナスのマージンのためにかなり上になります。理由がわからない。

私はこれまでのところとても近いと感じています。コールバックと関係があるのではないかと疑っています。

私はjQueryに非常に慣れていないので、これは私がやろうとしていることを少しばかげているように思えるかもしれません.

全体として、divsを互いの上に配置してタブを機能させるより良い方法を知っている人はいますか。それは使用することと関係があるdisplay:blockのでしょうか。

4

5 に答える 5

5

JQuery UI を使って、タブ機能を使ってみませんか?

http://jqueryui.com/demos/tabs/

セットアップと開始が非常に簡単です。

于 2012-06-12T17:41:19.083 に答える
3

あなたはかなり近かった - http://jsfiddle.net/7mfLF/1/

この部分を繰り返す必要はないことに注意してくださいdocument.ready。一度宣言すれば、準備完了です。

確かに Bootstrap と jQuery UI を使用できますが、これらは非常に重く、この種の小さなタスクの場合、130Kb ライブラリを含めることは実際にはベスト プラクティスではありません。

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});
于 2012-06-12T17:53:42.110 に答える
1

タブを表示しているように見えますが、再び非表示にすることはありませんか?

Twitter ブートストラップの使用を考えたことはありますか? 物事を単純化するかもしれません...

http://twitter.github.com/bootstrap/javascript.html#tabs

于 2012-06-12T17:44:28.273 に答える
0

私は自分のプロジェクトでこのコードを使用しています：

CSSとjQueryを使用したシンプルなタブ

純粋なJQuery（JQuery UIなし）を使用し、テストしたすべてのブラウザーで機能するため、シンプルで軽量です。希望があなたを助けることができます。

于 2012-06-13T20:06:59.773 に答える
0

これが私が望んでいたものであることがわかりました。

$(document).ready(function(){ 
    $("#tab1").click(function(){
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});                    
        $(".content-kidsclub").css({display: "block"}).animate({opacity: "1"},1000);    
    });

    $("#tab2").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});
        $(".content-computersuite").css({display: "block"}).animate({opacity: "1"},1000);   
    });

    $("#tab3").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "block"}).animate({opacity: "1"},1000);    
    });
});

CSS を display:none から display:block に変更するだけです。それからそれをフェードするアニメーション。便利だったらドキュメントを準備するだけでよいことを説明してくれてありがとう。

于 2012-06-13T15:09:28.973 に答える