JQuery 一次交换一个元素的切换

Question

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

您在顶部 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 中容器 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 的困境。

非常感谢帮助 索特克拉

Answer 1

我会为所有 DIV 分配一个公共类，这样我就可以集体引用它们。 当选择其中一个锚点时，我将从所有 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

最简单的解决方案是手动为菜单的每个元素添加事件，然后使用“切换”隐藏或显示，您可以添加与显示隐藏相同的效果

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

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.-您将如何自动化其他 div 的“定位”，这样您就不必单独命名它们？ 数组？

不管怎样，谢谢，我会继续努力的。

Answer 5

我现在甚至为“锚点菜单”本身添加了额外的功能/触摸。 就 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;  // 


            }
   });


});

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() 效果并让它变得漂亮和流畅......