Javascript 如何在翻滚时完成双div交换？

我正在寻找实现这一目标的方法的建议。鉴于以下情况：

[分区A（包含图像）]
[Div B（包含8个左右文本链接的水平列表）]
[C部分（包含文本）]

在滚动到Div B中的任何链接时，如何让Div A和Div C将其各自的内容交换到与该链接内容对应的不同内容

例如，如果要滚动一个名为“Dogs”的Div B链接，则在该滚动后，Div a将替换其内容并显示狗的图像，Div C将替换其内容并显示关于狗的文本

在滚动该链接之后，新的Div A和Div C内容将保持不变，直到滚动新链接为止

---

我希望这是有道理的。有人对实现这一点的最佳方法有什么建议吗？

您可以通过以下方式更改div的内容：

<script type="text/javascript">
    function over() {
        var a = document.getElementById('a');
        var c = document.getElementById('c');

        a.style.backgroundImage = "url(/path/to/image)";
        c.innerHTML = "<b>Dogs rock</b>";
    }
</script>

<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>

（）上的函数{
var a=document.getElementById（'a'）；
var c=document.getElementById（'c'）；
a、 style.backgroundImage=“url（/path/to/image）”；
c、 innerHTML=“狗岩”；
}

---

然后，您所需要做的就是添加您想要的任何其他div，并编写代码来适当地更改它们。使用css设置A和C的初始状态，或者在页面加载时调用over（）函数

假设

href

指向一个资源，其中包含这两个元素的内容，但您不能将链接的整个输出注入一个元素，类似这样的操作可能会起作用：

$('#divB a').mouseover(function() {

    //get images from link, inject into divA
    $('#divA').html('<strong>Loading...</strong>')
              .load($(this).attr('href') + ' img');

    //get divs from link, inject into divC
    $('#divC').html('<strong>Loading...</strong>')
              .load($(this).attr('href') + ' div'); 
});

$（'#divB a'）。鼠标悬停（函数（）{
//从链接中获取图像，注入到divA中
$（'#divA'）.html（'加载…'））
.load（$（this.attr（'href'）+'img'）；
//从链接获取div，注入divC
$（'#divC'）.html（'正在加载…'））
.load（$（this.attr（'href'）+'div'）；
});

嗯。。。使用jQuery应该很简单（与这里的一些其他答案相比）：

如果您不熟悉jQuery，则$（）是调用jQuery（）并使用

 $(document).ready(function() {
  // put all your jQuery goodness in here.
 });

是确保jQuery在正确的时间启动的一种方法。阅读更多关于这方面的信息

因此，首先，在divB列表中的每个

元素中添加一个类（即dogs）。接下来，将每个对应的图像赋予相同的类，并将每个文本块包含在具有相同类的divs中的#divC中。HTML将如下所示：

<div id="divA">
   <img src="dogs.jpg" class="dogs" />
   <img src="flowers.jpg" class="flowers" />
   <img src="cars.jpg" class="cars" />
</div>
<div id="divB">
   <ul>
      <li><a href="dogs.html" class="dogs">Dogs</a></li>
      <li><a href="flowers.html" class="flowers">Flowers</a></li>
      <li><a href="cars.html" class="cars">Cars</a></li>
   </ul
</div>
<div id="divC">
   <div class="dogs"><p>Text about dogs.</p></div>
   <div class="flowers"><p>Text about flowers.</p></div>
   <div class="cars"><p>Text about cars.</p></div>
</div>

我们说，当文档准备就绪时，当您使用.dogs类将鼠标悬停在

元素上时，执行一个函数。该函数将隐藏#divA中的所有图像，并立即使用.dogs类显示图像。然后它将隐藏#divC中的所有div，并立即使用.dogs类显示该div

同样的事情，你可以在花和车上多做两次，或者不管你有多少

---

请记住，如果您对深入研究jQuery感兴趣，也有更有效的方法可以做到这一点，但这将是帮助您准确了解jQuery正在做什么的一个可靠的入门方法。它还将脚本从HTML正文中删除

A和C部分的内容来自哪里？也就是说，你如何决定把什么放在它们里面？Div A和Div C的内容完全基于上一次滚动的链接。由于第一个Div B链接可能是“Dogs”，那么Div A将被初始化为包含狗的图像，Div C将被初始化为包含关于狗的文本。但是，如果B区链接“猫”被翻转，那么A区将隐藏/删除狗的图像，而不是显示猫的图像，C区将隐藏/删除关于狗的文本，而不是显示关于猫的文本。。。直到另一个链接被翻转过来。哦，别忘了将上面的jQuery包含在标记中。谢谢，这看起来很清楚！我绝对是一个jQuery新手，所以我将尝试一下，因为这对我来说是有意义的。一旦我掌握了基本知识，我会寻找更有效的方法来做这件事。。。再次感谢大家！

 $(document).ready(function() {
     $('a.dogs').hover(function() {
        $('#divA img').hide("fast");
        $('#divA img.dogs').show("fast");
        $('#divC div').hide("fast");
        $('div.dogs').show("fast");
     });
 });