0

現在、いくつかのことを行うために Bootstrap Nav-Tab が必要です。次のことを行う必要があります。

(タブをクリックすると)

  • onClick: タブが閉じている場合は開きます。それらが開いた場合、コード操作の同じスコープ/スタック/バブルで、ページを小さくし、グラフィカルにクールに見える他のものの下にNav-Tabsを移動して消えるために、そのすぐ上にdivが必要です。:)

  • onClick: 既に開いているタブをクリックすると、タブ セクションが閉じ、上で閉じていた div が下にスライドしてスペースを埋めます。（いいえ、アコーディオンコンポーネントはここでは機能しません。クリックトランジションの種類が間違っています）

  • onClick: タブが開いていて、ユーザーが content div で開いているタブとは別のタブをクリックすると、通常どおりにそのタブに切り替わります。

そのため、クリックが発生した場合の適切なタイミングを、これらの新しい言語で見つけようとしています。遷移が探していたものであるため、JQuery を使用しています。私は を持っていて、や$('.link').on('click', function() {} )を試してみましたが、どのイベントを発生させる必要があるのか​​ わかりません。.bind('click', function() {} ).click()on('click', function() {} )

これまでの私のコードは次のとおりです。

（間隔について申し訳ありません。貼り付けたときに非常に奇妙な間隔で自動間隔が空けられました:S)

    var isOpen = false;
    var tabOpenName = "";
    var liClicked = ""; 

    $(document).ready(function() {
        $(".link").on("click", function(event) {

        liClicked = $(event.target).valueOf("id"); //Grab link clicked

    // begin loop - Li
    $("#tabMenu li").each(function(index, li) {
        var currentListItem = $(li);

        if (currentListItem.attr("class") == "active"){
                isOpen = true;
                        tabOpenName = $(li).prop("id"); //Grab tab open

        } // end if

    }); // end selection loop


    if (isOpen == true) {

        alert(liClicked);       
        $("#tabContentId").slideToggle("slow");
        $("#learnMoreBox").slideToggle("slow");


    } // end if

    }) //end .on event
    }); // end query

ここで HTML を提供する必要はないと思います。これは、わかりやすい単純な用語を使用した命名規則を使用して疑似コードで返すことができるため<div id="containerToHide">です。

上で述べたように、#learnMoreBox は Nav-Tabs の上に配置され、タブが開いていることが確認されると消えます。#tabContentId は、私がclass="data-content"住んでいる div です。

現在、サイトはある程度機能しています。タブがクリックされると、インデックス番号 0 ～ 4 の間をクリックすると、タブのように機能します。ただし、ユーザーがタブをクリックし、それらのいずれかがアクティブになると、スライドが切り替わります。表示されているタブをクリックしたときにのみこれが発生するようにします。タブだけでなく...

クリックされた ID を見つける必要があることはわかっています<a href="">。笑。それが私がこれまでに抱えている唯一の問題だからです。私はそれを試してみてliClicked、.link クラスの<a href="">リスト項目のどれがクリックされたかを変数に表示させ、それを変数と比較して、tabOpenName開いているタブをクリックしたかどうかを確認しました。

最初は文字列を比較しないことを望んでいました。変数がselectedIndex開いているタブの数を指し、 if(selectedIndex == 0 && tabOpenName == 'Home') then {slide}...などの条件付きであることを望んでいました。

あなたはおそらく疑問に思っているでしょう... うーん... なぜ彼はalert最後の部分でそれを持っているのですか? 笑。それは、IDE、Chrome 開発ツール、または JQuery をステップ実行できるソフトウェアが見つからなかったためです。これが、私が伝統的に言語を学習する方法です。したがって、アラートを使用して、アラート内の文字列を返す方法を見つけることができるかどうかを確認していました。アラートで返される文字列を取得できれば、簡単に比較できます... アラートの tabOpenName は、現在開いているタブの正確な文字列を示しています。

助けていただければ幸いです。

4

1 に答える 1

2

まず、.on('click', function() {...})イベント ハンドラーをバインドするための jQuery の優先メソッドで.bind()あり、古いバージョンの jQuery で使用するメソッドです。また、.click(function() {...})のショートカットですが、渡されたイベント ハンドラー.on('click', function() {...})がない場合は、クリック イベントのトリガーです。.click()その前に混乱があった場合に備えて。

また、コードに「debugger」を入れるだけで、その行に到達したときに Chrome 開発ツールが実行を一時停止し、デバッガー インターフェースを開きます。例えば：

if (isOpen == true) {

    debugger     
    $("#tabContentId").slideToggle("slow");
    $("#learnMoreBox").slideToggle("slow");


} // end if

また、Chrome Dev Tools を使用して JavaScript コードをデバッグする方法について詳しくは、Google Developers Web サイトのDebugging JavaScriptを参照してください。

最後に、コンテキスト/コードがなければどれだけできるかわかりません。リスト アイテムのどこに「アクティブな」クラスを追加しますか? また、isOpen を true に設定し、二度と false に設定しないように思われます。これにより、状況に関係なく、リスト項目がクリックされるたびに" #tabContentId" と " " がスライドします。#learnMoreBox

//編集 1: これが私が試すことです。設定した内容と正確に一致しない可能性がありますが、私の考えの要点を理解できることを願っています。

var isOpen = false;
var tabOpenName = "";
var liClicked = ""; 

$(document).ready(function() {
    $(".link").click(function() {

        liClicked = $(this).attr("id"); //Grab id of link clicked

        if (isOpen) { //If there is an open link somewhere
            if ($(this).hasClass("active")) { //If the link just clicked is open
                $(this.).removeClass("active");
                isOpen = false; //Now there shouldn't be any link open
                $("#tabContentId").slideToggle("slow");
                $("#learnMoreBox").slideToggle("slow");
            } else { //If another link somewhere is open

                //Find and close the currently active link
                $(this).parent().find("li.active").removeClass("active");
                $(this).addClass("active"); //Mark this link as active

                //Do the content containers slide here? I'm still not clear on that haha

            } //End if-else cases where there is anything open at all
        } else { //Case where nothing is currently open
            $(this).addClass("active"); //Mark this link as open

            //Toggle the content area sliding animation
            $("#tabContentId").slideToggle("slow");
            $("#learnMoreBox").slideToggle("slow");

            isOpen = true; //We've opened a link now
        } //End If-Else

    }) //end click event handler
}); // end query

私はまだあなたが持っているセットアップとあなたが何をしたいのかを推測していますが、そのようにセットアップされたイベントハンドラーはあなたが望むものを達成できると思いますか?

于 2013-06-21T15:23:00.787 に答える