更好的交换 div 技术答案

【问题标题】：A better Swap divs technique更好的交换 div 技术
【发布时间】：2023-03-21 14:05:01
【问题描述】：

这就是我想要完成的。首先，我将在页面左侧有大约 8 个左右的图像，在右侧有大约 8 个 div。现在，当一个人点击一张图片时，我希望当前 div “隐藏”并替换为该图片链接到的另一个 div。

例如：我点击第二张图片，右侧发生变化……然后我点击第四张图片……右侧被替换为链接到该图片的 div 和链接到第二张图片的内容隐藏...等

我一直在尝试使用 Jquery Toggle 功能，但它似乎给我带来了问题，我可能没有正确使用它。想知道这是否甚至是要走的路……有没有更简单的方法可以让我得到同样的结果？

这是我当前的 url，用于在我构建真实的东西之前进行测试：
http://dtrot55.justinsonline.com/testing/thinkfirst-test/Untitled-1.html

【问题讨论】：

标签： jquery html toggle swap

【解决方案1】：

如果您像这样设置，这将起作用...此外，这是最基本的样式...正是您需要让功能正常工作。

HTML

<div id="mainContent">
   <div id="thumbs">
       <a href="#content1">Content1</a>
       <a href="#content2">Content2</a>
       <a href="#content3">Content3</a>
   </div>

   <div id="contentWrap">
      <div id="content1">
          <p>Content 1</p>
      </div>
      <div id="content2">
          <p>Content 2. Content 2. Content 2</p>
      </div>
      <div id="content3">
          <p>Content 3 information goes here. Content 3 information goes here. Content 3 information goes here</p>
      </div>
  </div>

</div>

CSS

#contentWrap { position: relative; }

#contentWrap div { position: absolute; left:0; top:0; }

jQuery

$(function() {
    $('#contentWrap div').hide();
    $('#contentWrap div:first').show();
    $('#thumbs a:first').addClass('active');

    $('#thumbs a').click(function() {
        if ($(this).hasClass('active') == true) {
            return false;
        }
        else {
            $('a.active').removeClass('active');
            $(this).addClass('active');

            $('#contentWrap div').fadeOut();
            var contentToLoad = $(this).attr('href');
            $(contentToLoad).fadeIn();

            return false;
        }
    });
});

编辑说明：基本上，当页面加载时。第 1 行表示隐藏所有内容 Div。第 2 行表示要在 ContentWrap 中显示第一个 Content Div。第 3 行将一个类广告到第一个 Thumb 锚点。

现在开始点击功能。让我们假装 if 语句不存在，为 click 函数执行的唯一代码是 else 块中的代码。第一行从所有 Thumb 锚点中删除了“活动”类。第二行将“活动”类添加到您刚刚单击的 Thumb 锚点。下一行淡出 ContentWrap div 中所有可见的 Contents div。下一行根据您刚刚单击的链接的 href 值（即您要加载的内容的 ID）创建一个变量。使用 ID 作为变量，它现在可以用作选择器了。下一行使用变量选择要加载的 Content div 并将其淡入。最后一行阻止链接执行。

为什么会有 if, else 语句。 if 语句的第一部分简单地说，如果您单击的 Thumb 锚点具有活动类，则不要加载内容。如果没有，则加载内容。

【讨论】：

这看起来很棒...我正在尝试通过代码来更好地理解它...所以基本上包装器是隐藏的...当点击链接时contentWrap 被显示，并且里面的 div 被赋予一个活动类......而其他人被保持隐藏......然后如果点击其他东西，它会剥离其活动类的当前 div 并将其添加到新的 div 并淡入...我接近了吗？
我认为您的关闭..对不起，应该稍微解释一下...我会更新帖子...

【解决方案2】：

我看到的第一件事是您在$("#toggle") 上使用了两次toggle，并且从未将其应用于$("#toggle3")。

【讨论】：