JQuery一次交換元素的切換

Question

我是JQuery的新手，我想知道您是否對如何使用JQuery而不是JScript完成以下操作有任何了解：

您在頂級div內有一個小組：

<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中，有四個內容div，一個接一個，另一個都屬於上述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，我希望發生以下行為：

1.-如果我單擊的項目與默認情況下未打開的項目（acerca）不同，請關閉當前打開的項目並向我顯示新項目。 2.-如果我單擊已經打開的同一項目（acerca），則什么也沒有發生：必須始終始終打開一個內容div。 3.-如果可能，請使用#anchors掩蓋丑陋的“ javascript :;” 過去的日子

使用JavaScript的onclick函數（保存為＃3）非常簡單，但是我不知何故陷入了JQuery的困境。

非常感謝您的幫助Sotkra

Answer 1

我將為所有DIV分配一個通用類，以便可以共同引用它們。 當選擇一個錨點時，我將從所有DIV中刪除所有“選定”類，然后將“選定”類應用於應顯示的DIV。 然后，我將隱藏所有沒有選定類別的DIV，並顯示確實具有選定類別的DIV。 這樣，如果您重新單擊相同的鏈接，將不會閃爍，就像您只是隱藏所有DIV然后顯示選定的鏈接一樣。

  $('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

最簡單的解決方案是為菜單的每個元素手動添加事件，然后隱藏或顯示“ toggle”，您可以添加與show hidde相同的效果

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

另一種解決方案，在這種情況下，您可以添加菜單項而不更改jquery代碼，但前提條件是錨文本必須是div id。

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

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

Answer 3

特凡弗森的想法稍有不同。

$('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.-如何自動實現其他div的“定位”，這樣您就不會單獨命名它們？ 數組？

無論如何，謝謝，我會繼續努力。

Answer 5

現在，我想為“錨菜單”本身添加一個額外的功能/功能。 從JQuery的角度來看，整個過程看起來像這樣。 不要介意用於example =）的愚蠢變量名：

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

大家好答案！

我進行了一些調整，以在切換 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()效果並使它變得美觀流暢。