更好的交换div技术

Question

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

例如:我单击第二张图片，右侧的changes...then单击第四张图片，右侧将替换为链接到该图片的image...the和链接到第二张图片的内容hides...etc

我一直在尝试使用Jquery切换功能，但它似乎给我带来了问题，我可能没有正确使用它。想知道这是不是go...is的方法，还有一种更简单的方法，可以让我得到同样的结果吗？

这是我当前的url，用于在构建真正的代码之前对其进行测试。

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行将一个类添加到第一个拇指锚点。

现在来看一下click函数。让我们假设if语句不存在，并且为click函数执行的唯一代码是else块中的内容。第一行从所有Thumb锚点中删除“active”类。第二行将“active”类添加到您刚刚单击的Thumb锚点。下一行淡出ContentWrap div中所有可见的内容div。下一行根据您刚才单击的链接的href值(这是您想要加载的内容的ID )创建一个变量。有了ID作为变量，它现在就可以用作选择器了。下一行使用变量来选择要加载的内容div，并将其淡入。最后一行阻止链接执行。

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

Answer 2

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