Question

我正在寻找有关实现这一目标的建议。鉴于以下内容：

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

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

例如，如果要翻转名为“Dogs”的Div B链接，那么在该翻转时，Div A将替换其内容并显示狗的图像，而Div C将替换其内容并显示关于狗的文本

滚动链接后，新的Div A和Div C内容将保留到位，直到新的链接被翻转。

我希望这是有道理的。有没有人就最佳方法提出建议？

Answer 1

假设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'); 
});

Answer 2

嗯......这应该是非常简单的jQuery（与其他一些答案相比）：

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

的快捷方式

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

是一种确保jQuery在正确的时间触发的方法。详细了解here。

首先，在#divB列表中的每个<a>元素中添加一个类（即.dogs）。接下来，为每个相应的图像提供相同的类，并在包含相同类的div中的#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>

然后使用以下jQuery，将其放在HTML文档的<head>部分：

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

我们说当文档准备就绪时，当您将鼠标悬停在带有.dogs类的<a>元素上时，执行一个函数。该函数将隐藏#divA中的所有图像，并立即显示带有.dogs类的图像。然后它将隐藏#divC中的所有div并立即显示带有.dogs类的div。

你可以为.flowers和.cars做两次同样的事情，或者你有多少。

请记住，如果您有兴趣深入了解jQuery，那么也有更有效的方法，但这将是一个可靠的方法，可以帮助您准确了解jQuery正在做什么。它也使脚本保持在HTML体内！

Answer 3

您可以使用以下内容更改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>

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

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

3 个答案: