时间戳

首页 > 解决方案 > 如何使用单个锚标记激活跳转链接并链接到 iframe？

javascript - 如何使用单个锚标记激活跳转链接并链接到 iframe？

问题描述

我想实现以下功能。当用户点击缩略图/链接时，该缩略图的图像将显示在 iframe 上，同时跳转到该缩略图的描述 - 谢谢

    <style>
        .flex-container{
            display: flex;
        }
        .scrollBox{
            overflow: auto;
            width: 400px;
            height: 530px;
        }
    </style>

<body>
    <div class="flex-container">
        <nav class="navigation">
            <a href="../img/image1.png" target="full-size">
                image1
            </a>
            <br>
            <a href="../img/image2" target="full-size">
                image2
            </a>
        </nav>
        <iframe name="full-size" width="245" height="560" 
                src="../img/image1">
        </iframe>
        <div class="scrollBox">
            <h1>Image1 Descriptions</h1[![enter image description here][1]][1]>
            Lorem120
            <hr>
            <h2>Image2 Descriptions</h2>
            Lorem200
        </div>
    </div>
</body>

例子

我的尝试：当我点击缩略图时，它也会点击另一个跳转到描述的锚标签（我只是隐藏链接到描述的标签）。

    <script>
        function jumpToDescription(){
            document.getElementsByTagName("a")[2].click();
        }
    </script>
      <div class="flex-container">
            <a href="../img/image1.png" target="full-size" onclick="jumpToDescription()">
                image1
            </a>
            .
            .
            .
            <a style="display: none" href="#image1Description">Image1</a>
    </div>

我的问题是如何重写jumpToDescription()以使函数可重用？而不是为具有唯一 .getElementsByTagName 索引号的每个缩略图创建一个唯一函数。另外，如果你们有比这更好的方法，我也愿意接受。- 谢谢你

标签： javascripthtmlcss

解决方案

推荐阅读