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

Question

我不确定如何提出这个问题，所以下面是我想要实现的目标的可视化。 如果有什么我可以澄清的话，请告诉我！

澄清： 在第一张幻灯片中，可以看到图像01和图像02。只有当用户点击图像时，文本和标题div才会显示。更重要的是，文本框必须与页面包装器保持一致。例如，如果我将文本div设置为float:right，它将浮动在页面包装器的右侧。

提前谢谢。

Answer 1

我认为你需要一些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(); 
});

Answer 2

有很多方法可以实现这一目标。

1）每个东西都是静态的，即关于图像的信息已经在不同div的页面中可用。  前：工作

＆＃13;

＆＃13;

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.switch').hide();
	});
	function myInfo(myId)
	{
		$('.switch').hide();
		$('#title'+myId).show();
		$('#description'+myId).show();
	}
</script>
<table>
	<tr>
		<td>
			<!-- Images -->
			<img onclick="return myInfo('1')" id='image1' height="60" width="60" src="http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg" alt="Image1"><br/>
			<img onclick="return myInfo('2')" id='image1' height="60" width="60" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6I83EILo3XKIsqZ-0Q5JAEw38xGzsy1g_iKImqjBrMVaOHYb4Zg" alt="Image2">
		</td>
		<td>
			<div id="title1" class="switch"> Image 1</div>
			<div id="title2" class="switch"> Image 2</div>
		</td>
		<td>
			<div id="description1" class="switch"> Information about Image 1 </div>
			<div id="description2" class="switch"> Information about Image 2 </div>
		</td>
	</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

2）你可以使用AJAX调用图像信息来实现这一点，在这种情况下，只有1个div用于标题，1个用于信息就足够我想要使用其他1 div就足够了。单击图像进行AJAX调用以获取图像信息并将其显示在div中。

这是两种方式，还有更多方法。