مسج تبادل تبديل العناصر، واحدة في وقت واحد

Question

أنا جديد في جيسي وأرغب في معرفة ما إذا كان لديك أي فكرة فيما يتعلق بكيفية تحقيق ما يلي باستخدام Jquercer بدلا من JScript:

لديك مجموعة من 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، هناك أربعة Divs محتوى، واحد تلو الآخر، كل ينتمي إلى كل من A أعلاه:

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

الآن، هذه الفكرة هنا هي أننا نبدأ بإغلاق جميع هذه المحتوى DIV ولكن الأول، الأول: acerca، وهو مرئي للمستخدم:

$(document).ready(function(){

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

});

الآن، باستخدام H3 A's AT في الأعلى، أريد أن يحدث السلوك التالي:

1.- إذا قمت بالنقر فوق عنصر مختلف عن Open Open افتراضيا (Acerca)، فاقم بإغلاق واحد مفتوح حاليا ويظهرني 2.- إذا قمت بالنقر فوق نفس العنصر الذي يفتح بالفعل (Acerca)، فلن يحدث شيء ما: يجب أن يكون هناك دائما محتوى محتوى مفتوح في جميع الأوقات. 3.- إذا كان ذلك ممكنا، باستخدام #anchors لإخفاء "JavaScript:" من الأيام الخوالي.

هذا بسيط للغاية مع استخدام وظيفة onclick في JavaScript (حفظ مقابل # 3) ولكن، أنا في حد ذاته عالق مع جيس.

تساعد في تقدير كبير Sotkra

Answer 1

سأعرف فئة مشتركة لجميع divs حتى أتمكن من الرجوع إليها مجتمعة. عندما يتم تحديد أحد المراسيين، سأزيل أي فئات "محددة" من جميع Divs، ثم قم بتطبيق فئة "محددة" إلى DIV التي يجب إظهارها. ثم سأخف جميع divs التي لا تملك الطبقة المحددة وإظهار DIV الذي يحتوي على الفئة المحددة. وبهذه الطريقة إذا كنت لا تكرر نفس الرابط فلن يكون لديك أي وميض كما لو كنت قد أخطأت ببساطة جميع divs، فقم بعرضها المحدد.

  $('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
 }); 

Answer 2

الحل الأسهل هو إضافة الأحداث يدويا لكل عنصر من عناصر القائمة ثم مخفية أو إظهار مع "تبديل" على Wich يمكنك إضافة نفس التأثيرات كما هو الحال مع Show Hidde

$("#acer").click(function() { $("#acerca").toggle();} );
$("#cur").click(function() { $("#cursos").toggle();} );
...

حل آخر، في هذه الحالة، يمكنك إضافة عناصر قائمة دون تغيير رمز مسج، مع الشرط الذي يجب أن يكون نص المرساة هو معرف Div.

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

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

Answer 3

تباين مختلف قليلا من فكرة TVANFOSSON..

$('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');
   }
}

Answer 4

بعد إعداد بعض الإلهام من اقتراحاتكم، توصلت إلى هذا:

$('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. - كيف يمكنك أتمتة "الاستهداف" من Divs الأخرى حتى لا تسميتها بشكل فردي؟ صفائف؟

شكرا على أي حال، سأستمر في العمل عليه.

Answer 5

ذهبت الآن بقدر إضافة وظيفة إضافية / لمسة إلى "قائمة المراسي" نفسها. كل شيء، مسج الحكمة، يبدو أن هذا. neverMind أسماء متغيرة سخيفة المستخدمة للمثال =):

$(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;  // 


            }
   });


});

Answer 6

إجابات رائعة يا شباب!

لقد قمت ببعض التعديلات للحصول على بعض الرسوم المتحركة أثناء التباين Divs ... لقد استخدمت تأثير الشريحة ولكن يجب أن تعمل مع أي نوع من الرسوم المتحركة.

$('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() تأثير والحصول عليها لطيفة وسلسة ...