0

我是 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，一个接一个，每个都属于上面的每个 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

4

6 回答 6

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
 });
于 2009-07-22T14:19:46.967 回答
0

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

$("#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(); 
    });
于 2009-07-22T14:34:52.353 回答
0

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');
   }
}
于 2009-07-22T15:39:53.077 回答
0

从您的建议中汲取灵感后，我想出了这个：

$('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 的“定位”，以便您不单独命名它们？数组？

无论如何，谢谢，我会继续努力的。

于 2009-07-23T14:35:01.090 回答
0

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


            }
   });


});
于 2009-07-23T15:50:21.827 回答
0

伙计们的好答案！

我在切换 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()效果并使其美观流畅...

于 2009-09-09T00:02:15.870 回答