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

最简单的解决方案是手动添加菜单中每个元素的事件，然后隐藏或显示“切换”，您可以添加与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

tvanfosson's idea的变体略有不同。

$('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()内使用回调函数来激活{ {1}}效果并让它变得美观和流畅......

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

6 个答案: