JQuery交换肘的要素，一个在一段时间

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

题

我是新来的能力和我想知道如果你有任何想法，关于如何完成以下字，而不是JScript:

你有一组的内的顶级:

<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 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一个是在上面，我希望以下行为：

1.- 如果我点击一个不同的项目于一个开放的通过默认(acerca)，然后关闭，目前打开一个和我的新的一个。2.- 如果我点击相同的项目已开放(acerca)，然后什么也没发生:必须始终有一个内容div在任何时候都开放。3.- 如果可能的话，使用#锚于掩盖丑陋的"javascript:;"的老天。

这是非常简单的使用JavaScript击功能(保存为#3)但是，我是以某种方式得到坚持！

帮助是极大的赞赏 Sotkra

有帮助吗？

解决方案

我分配一个公共类的所有的DIV，所以我可以统称引用它们。当选择其中一个锚点，我会从所有的DIV删除任何“选择”类，然后应用“入选”类应显示的DIV。然后我就躲在没有选定的类别并表明确实有选择的类DIV所有div。这样，如果你reclick相同的链接，你不会有任何闪烁，你会如果你只是躲在所有的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
 });

其他提示

，最简单的解决方案是增加手动事件用于菜单的每一个元素，然后隐藏，或与“切换”上至极可以添加相同的效果与显示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(); 
    });

一个稍微不同的变化 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');
   }
}

这是您的建议拟定了一些启发后，我想出了这一点：

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