JQuery 要素の切り替えを一度に 1 つずつ切り替える

StackOverflow https://stackoverflow.com/questions/1165512

質問

私は JQuery を初めて使用するのですが、JScript ではなく JQuery を使用して次のことを実現する方法について何かアイデアがあるかどうか知りたいです。

最上位 div 内に a のグループがあります。

<h3>
<a id="acer" href="#acerca">acerca</a> |
<a id="cur" href="#cursos">cursos y clases</a> |
<a id="cal" href="#calendario">calendario</a> |
<a id="con" href="#contacto">contacto</a>
</h3>

そして、その下には、同じコンテナ div 内に 4 つのコンテンツ div が順番にあり、それぞれが上記のそれぞれの a に属します。

<div id="acerca"></div>
<div id="cursos"></div>
<div id="calendario"></div>
<div id="contacto"></div>

さて、ここでの考え方は、最初の 1 つを除くすべてのコンテンツ div を閉じることから始めるということです。acerca、ユーザーに表示されます。

$(document).ready(function(){

    $("#cursos,#calendario,#contacto").hide();

});

ここで、先頭の h3 a を使用して、次の動作を実行したいとします。

1.- デフォルトで開いている項目 (acerca) とは異なる項目をクリックすると、現在開いている項目を閉じて、新しい項目が表示されます。2.- すでに開いている同じ項目 (acerca) をクリックしても、何も起こりません。常に 1 つのコンテンツ div が開いている必要があります。3.-可能であれば、#anchorsを使用してugい「JavaScript :;」をマスクします。昔の。

これは JavaScript の onclick 関数を使用することで非常に簡単です (#3 のために保存) が、どういうわけか JQuery で行き詰まっています。

ヘルプはSotkraを大歓迎します

役に立ちましたか？

解決

私はので、私はまとめて参照することができ、すべてのdiv要素に共通のクラスを割り当てると思います。アンカーの一つが選択されている場合、私はそれから示されるべきDIVに「選択」クラスを適用、div要素の全てからいずれかの「選択」クラスを削除したいです。私はその後、選択したクラスを持っていると、選択したクラスを持っているんDIVを示していないすべてのdivを非表示にします。あなたが同じリンクをreclick場合は、単純にすべてのdiv要素を隠した場合は、その後、選択された1つを表示していましたので、この方法であなたはどんな点滅を持っていません。

  $('a').click( function() {
      var all = $('div.interface');
      var selected = $(this).attr('href');
      all.removeClass('selected');
      $(selected).addClass('selected');
      div.filter(':not(.selected)').hide();
      div.filter('.selected').show();
      return false;  // stop the link from being taken
 });

他のヒント

最も簡単な解決策は、あなたがショーhidde

と同様の効果を追加することができ、メニューのすべての要素のためのイベントを手動で追加することで、その後、非表示またはウィッヒの「トグル」を示します 
$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

この場合、別の解決策は、あなたがアンカーテキストがdiv要素のIDでなければならないことを必要条件と、jqueryのコードを変更せずにメニュー項目を追加することができます。

<a href="#acerca" class="anchorClass">acercade</a>
<div id="acercade"></div>

    $(".anchorClass").click(function(){ 
            $("#"+$(this).text()).toggle(); 
    });

の少し異なるバリエーション トヴァンフォッソンのアイデア.

$('a').click(
    function()
    {
        var selected = $(this).attr('href');
        //If user clicked on a link which is already displayed, do nothing.
        if($(selected).hasClass('selected'))
            return;

        //hide all the divs.
        $('div.interface')
            .hide()
            .removeClass('selected');

        //show the selected div.
        $(selected)
            .show()
            .addClass('selected');
   }
}

ご提案からいくつかのインスピレーションを描画した後、私はこの思い付います：

$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca").hide();
        $("#cursos").hide();
        $("#calendario").hide();
        $("#contacto").hide();
        $(checker).show();

        return false;


            }
   });

この場合、

1 - どのようにそれらを個別に名前を付けないようにあなたが他のdivの「ターゲッティング」を自動化するのでしょうか？配列？

とにかくおかげで、私はそれに取り組んでおこう。

私は今、「アンカーメニュー」自体に余分な機能/タッチを追加する限り行ってきました。全部、jQueryのが賢明では、次のようになります。ネヴァーマインド例えば使用さ愚かな変数名=）：

$(document).ready(function(){

$("#cursos,#calendario,#contacto").hide();
$("#ace").addClass('check');


$('h3 a').click(
    function()
    {

        var checker = $(this).attr('href');
        var anchorer = $(this);

        if ($(checker).is(":visible"))

        {
        return false;
        }

        else {      

        $("#acerca,#cursos,#calendario,#contacto").hide();
        $(checker).show();
        $("#ace,#cur,#cal,#con").removeClass('check');
        $(anchorer).addClass('check');

        return false;  // 


            }
   });


});

グレート答えみんな！

のdivをトグルしながら、

私はいくつかのアニメーションを取得するためにいくつかの調整をした...私はスライドエフェクトを使用しますが、それはアニメーションの任意の種類で動作するはずです。

$('a').click( function() {
    var all = $('div.interfase');
    var selected = $(this).attr('href');
    if($(selected).hasClass('selected') || $(selected).is(":visible"))
        return false;
    else
    {
        all.removeClass('selected');
        $(selected).addClass('selected');
        $('div.interfase:visible').filter(':not(.selected)').hide('slide',
        function() {
        all.filter('.selected').show('slide');
        });
        return false;
    }
});

注：以前に選択され、目に見えるdiv要素を持っている場合、私はhide()の効果を発動し、それを得るためにshow()の内側にのコールバック関数のを使用していますので、このコードはのみ、動作します素晴らしく、スムーズな...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top