时间戳

首页 > 解决方案 > JQuery 用链接内容填充 div，但还需要移动（如锚链接）到 div 所在的区域

html - JQuery 用链接内容填充 div，但还需要移动（如锚链接）到 div 所在的区域

问题描述

我有无序列表的链接。使用 JQuery，单击时，链接的内容（带有图像和文本的 div）被加载到指定的部分。这一切都很好。但我想知道如何让 onclick 函数将视图移动到页面上 div 的位置，类似于锚标记的工作方式。这是您可以看到正在填充的 div 的站点，但不能向下移动以查看它。 https://www.thecompassconcerts.com/artists.php

我的 JQuery 知识并不出色（我很慷慨）。

我按照 Osama 的建议添加事件侦听器，我得到了几乎正确的结果。第一次单击时...内容已加载但不移动。但在每次连续点击时，它都能完美运行：加载内容并移动到 div（如锚链接）有效！但是...不在 Safari 或 Mobile Safari 上。

这是我的 jQuery。我假设如果第一次点击不起作用，我必须在第一次点击之前添加监听器？是否可以在页面加载之前添加事件侦听器以防止默认点击等功能？

<script>
        // BEGIN FUNCTION TO CAPTURE AND INSERT CONTENT
        $(document).ready(function () {

            // PREVENT DEFAULT LINK ACTION
            $('.bio').click(function (e) {
                e.preventDefault();

                // ADD LISTENER TO EACH ITEM BY CLASS
                var list = document.getElementsByClassName("bio");
                for (let i = 0; i < list.length; i++) {
                    list[i].onclick = moveToDiv;
                }

                // FUNCTION TO MOVE TO LOCATION
                function moveToDiv() {
                    document.location = "#performbio";
                }

                // STORE the page contents
                var link = $(this).attr("href");

                // load the contents into #performbio div
                $('#performbio').load(link);

            });
        });
    </script>

这是带有无序列表链接的 HTML

<!-- CONTRIBUTING ARTISTS LIST AND BIOS -->
            <section id="artists">
                <h2>Contributing Artists</h2>
                <ul class="cols">
                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>

                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>

                    <li><a class="bio" href="performers/first-last.html">First Last</a></li>
</ul>
</section>

这是按功能插入代码的部分的 HTML

<!-- Performer Bios Dynamically updated -->
            <section id="performbio">

            </section>

这是正在插入的 div 内容

<div class="artistbio">
    <p class="artistname">First Last</p>
    <img class="artistimg" src="performers/img/name.jpg">
    <p>lots of text here</p>
</div>

标签： htmljquery

解决方案

如果我理解正确，您希望滚动到单击列表中的任何项目时出现详细信息的部分，但通过 js 而不是 HTML。在这种情况下，您将在列表元素上添加一个 onclick 侦听器，如下所示：

listElement.onclick = moveToDiv;

功能：

function moveToDiv() {
    document.location = "#performbio";
}

向所有元素添加侦听器的简单方法：

var list = document.getElementsByClassName("bio");
for (let i = 0; i < list.length; i++) {
    list[i].onclick = moveToDiv;
}

对于编辑后的帖子，您需要将函数定义移出document.ready函数。您可以将脚本更改为：

    // FUNCTION TO MOVE TO LOCATION
    function moveToDiv() {
        document.location = "#performbio";
    }

    $(document).ready(function () {
        // PREVENT DEFAULT LINK ACTION
        $('.bio').click(function (e) {
            e.preventDefault();

            // ADD LISTENER TO EACH ITEM BY CLASS
            var list = document.getElementsByClassName("bio");
            for (let i = 0; i < list.length; i++) {
                list[i].onclick = moveToDiv;
            }

            // STORE the page contents
            var link = $(this).attr("href");

            // load the contents into #performbio div
            $('#performbio').load(link);

            });
        });

另一个解决方案：使用 scrollIntoView

首先，将所有元素放入一个变量中querySelectorAll

    var elements = document.querySelectorAll(".bio");

然后为滚动部分创建一个函数：

    function scroll(element) {
        element.scrollIntoView();
    }

然后只需添加 onclick 侦听器：

    for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() { 
            scroll(elements[i]); 
        }); 
    }

推荐阅读