更改多个div的onclick内容
[英]Change content of multiple div's onclick
问题描述
I need help with some JavaScript to a product toggle page.
我需要一些 JavaScript 到产品切换页面的帮助。
Basically, all I have a page with 3 div's.基本上，我所有的页面都有 3 个 div。
#product-toggle
#product-image
#product-specs
The #product-toggle div has a menu with links to several products. #product-toggle div 有一个菜单，其中包含指向多个产品的链接。 When clicking on each product link, the #product-image and #product-specs content has to change to the actual product that will get clicked.单击每个产品链接时，#product-image 和 #product-specs 内容必须更改为将被单击的实际产品。
I've tried several div swap scripts, but they all only change 1 div, and not 2 as in my case.我已经尝试了几个 div 交换脚本，但它们都只更改了 1 个 div，而不是像我这样的 2。 Also I can't use any solution where the content text is written INSIDE the JS.此外，我无法使用任何将内容文本写入 JS 内部的解决方案。 The content has to be written in a DIV (for easy customization in the CMS that I will be using).内容必须写在 DIV 中（以便在我将使用的 CMS 中轻松定制）。
Thanks in advance!提前致谢！
Also if jQuery can be avoided, that'll be great.此外，如果可以避免使用 jQuery，那就太好了。
This is the HTML of the page:这是页面的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta charset="UTF-8">
<title>Products</title>
</head>
<body>
<div id="product-image">
<div id="model-1-img"><img src="link/to/model-1/img.png" /></div>
<div id="model-2-img"><img src="link/to/model-2/img.png" /></div>
<div id="model-3-img"><img src="link/to/model-3/img.png" /></div>
</div>
<div id="product-toggle">
<a href="#">Model 1</a> | <a href="#">Model 2</a> | <a href="#">Model 3</a>
</div>
<div id="product-specs">
<div id="model-1-spec">
<p>Specs of model 1</p>
</div>
<div id="model-2-spec">
<p>Specs of model 2</p>
</div>
<div id="model-3-spec">
<p>Specs of model 3</p>
</div>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 2014-04-08 11:45:20
I think you can use this, though I have not included it for images which I am sure you can do after looking at this example.我认为你可以使用它，尽管我没有将它包含在图像中，我相信你在看过这个例子后可以做到。
<div id="product-toggle">
<h3> Click on any brand to know its specs: </h3>
<h2 onclick="toggleContent('samsung')" style="color: blue">Samsung</h2>
<h2 onclick="toggleContent('nokia')" style="color: blue">Nokia</h2>
<h2 onclick="toggleContent('apple')" style="color: blue">Apple</h2>
</div>
<h3> Product Specifications </h3>
<div id="product-specs" style="color: brown; font-size: 25px"> </div>
<script>
var specs = {
'samsung' : 'S5 is lastest Samsung Phone',
'apple' : 'iPhone5 is latest Apple Phone',
'nokia' : 'Nokia has started making Android phone'
}
function toggleContent(brand)
{
document.getElementById('product-specs').innerHTML = specs[brand];
}
</script>
Thank You谢谢你
解决方案2
0 2014-04-08 11:26:40
you need to set a onClick -callback for each link.您需要为每个链接设置一个onClick回调。 The callback looks for the link's id and executes some business logic eg fetching the data via ajax.回调查找链接的 id 并执行一些业务逻辑，例如通过 ajax 获取数据。 then you should use那么你应该使用
var specs = document.getElementById("#divId");
to write all your information inside the diff.将您的所有信息写入差异中。
this is a very basic task, you dont need some scripts/libraries for this这是一项非常基本的任务，您不需要为此使用一些脚本/库
解决方案3
0 2014-04-08 13:28:01
Here is the modified one with image toggle as well:这是带有图像切换的修改后的：
<div id="product-toggle">
<h3> Click on any brand to know its specs: </h3>
<h2 onclick="toggleContent('samsung')" style="color: blue">Samsung</h2>
<h2 onclick="toggleContent('nokia')" style="color: blue">Nokia</h2>
<h2 onclick="toggleContent('apple')" style="color: blue">Apple</h2>
</div>
<h3> Product Specifications </h3>
<div id="product-specs" style="color: brown; font-size: 25px"> </div>
<img src="" id="product-image">
<script>
var specs = {
'samsung' : {desc: 'S5 is lastest Samsung Phone', src:'bear.png'},
'apple' : {desc: 'iPhone5 is latest Apple Phone', src:'cat.png'},
'nokia' : {desc: 'Nokia has started making Android phone', src:'chiken.png'}
}
function toggleContent(brand)
{
document.getElementById('product-specs').innerHTML = specs[brand].desc;
document.getElementById('product-image').src = specs[brand].src;
}
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.