有没有一种方法可以将内容与多个div连接起来？

kenhimself 发表于 Dev

Kenhimself

我不确定如何问这个问题，因此下面是我想要实现的可视化。请让我知道我是否可以澄清！

澄清：在第一张幻灯片上，可以看到图像01和图像02。仅当该人单击图像时，文本和标题div才可见。更重要的是，文本框必须与页面包装器保持一致。例如，如果将文本div设置为float:right，它将浮在页面包装程序的右侧。

在此处输入图片说明

先感谢您。

吸血鬼

我认为您需要一些JavaScript才能获得此行为。您可以尝试如下操作：

一切都在伪代码中。

HTML：

<img src="..." class="img1 clickImage">
<img src="..." class="img2 clickImage">

<div class="imageTitles">
    <div class="img1 imgTitle">TITLETEXT</div>
    <div class="img2 imgTitle">TITLETEXT</div>
</div>

<div class="imageInformations">
    <div class="img1 imgInformation">INFORMATION img1</div>
    <div class="img2 imgInformation">INFORMATION img2</div>
</div>

还有一些jQuery：

jQuery('.clickImage').on('click', function() {
    var imgNumber = jQuery(this).getClass().replace('clickImage', '');
    jQuery('imageTitles .imgTitle').hide(); //hide all image Titles
    jQuery('imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1

    //repeat this for imgInformation
});

一切都有些粗糙，但我希望它能使您了解您需要做什么。

编辑：代码现在看起来像这样：

HTML：

<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
  <div class="imageTitles">
    <div class="img1 imgTitle">TITLETEXT</div>
    <div class="img2 imgTitle">TITLETEXT</div>
  </div>
  <div class="imageInformations">
    <div class="img1 imgInformation">INFORMATION img1</div>
    <div class="img2 imgInformation">INFORMATION img2</div>
  </div>
</div>

JS：

jQuery('.imageTitles .imgTitle').hide(); 
jQuery('.imageInformations .imgInformation').hide(); 

jQuery('.clickImage').on('click', function () {
  var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
  jQuery('.imageTitles .imgTitle').hide(); //hide all image Titles
  jQuery('.imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1    
  jQuery('.imageInformations .imgInformation').hide();
  jQuery('.imageInformations .imgInformation.' + imgNumber).show(); 
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。