Question

我需要一些JavaScript帮助产品切换页面。

基本上，我所有的页面都有3个div。

#product-toggle
#product-image
#product-specs

#product-toggle div有一个菜单，其中包含指向多个产品的链接。点击每个产品链接时，＃product-image和#product-specs内容必须更改为将被点击的实际产品。

我尝试了几个div交换脚本，但它们只改变了1个div，而不是像我的情况那样改变了2个div。此外，我不能使用任何内容文本写在JS内的解决方案。内容必须用DIV编写（以便在我将使用的CMS中轻松进行自定义）。

提前致谢！

如果可以避免使用jQuery，那就太棒了。

这是页面的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>

Answer 1

我认为您可以使用此功能，但我没有将其包含在图片中，我相信在查看此示例后您可以这样做。

<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>

谢谢

Answer 2

您需要为每个链接设置onClick - 回调。回调查找链接的id并执行一些业务逻辑，例如通过ajax获取数据。那么你应该使用

var specs = document.getElementById("#divId");

在diff中写下你所有的信息。

这是一项非常基本的任务，你不需要这个

的一些脚本/库

Answer 3

以下是带图像切换的修改后的内容：

<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>

更改多个div的内容onclick

3 个答案: