Question

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

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

我一直在尝试使用Jquery Toggle功能，但它似乎给了我一些问题，我可能没有正确使用它。想知道这是否还有可行的方法......是否有更简单的方法可以让我同样出来？

以下是我在构建真实内容之前测试此内容的当前网址：
http://dtrot55.justinsonline.com/testing/thinkfirst-test/Untitled-1.html

Answer 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锚点中删除“活动”类。第二行将类“active”添加到您刚刚单击的Thumb锚点。下一行淡出ContentWrap div中的所有可见内容div。下一行根据您刚刚单击的链接的href值创建变量（这是您要加载的内容的ID）。将ID作为变量，现在可以将其用作选择器。下一行使用该变量来选择要加载的内容div并将其淡入。最后一行阻止链接执行。

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

Answer 2

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

一个更好的Swap divs技术

2 个答案: