JavaScript 控制页面锚点自动点击

需求背景

在单页应用或多页面跳转场景中，有时需要支持带锚点的 URL 访问。当用户直接访问此类链接时，浏览器默认滚动到锚点位置，但某些交互逻辑可能需要额外触发元素点击事件以激活对应的 Tab 或面板。

解决方案

利用 JavaScript 结合 jQuery 监听页面加载完成后的 URL 哈希值，通过延时执行确保 DOM 渲染完毕，随后根据预设的锚点列表进行匹配，并触发相应的点击事件和样式更新。

代码示例

$(function () {
    window.setTimeout(function () {
        var hash = window.location.hash; // 获取锚点名称，如 #my-topic
        var hashArr = ['#my-topic']; // 自定义锚点数组

        if ($.inArray(hash, hashArr) > -1) { // 如果数组中包含用户传来的锚点标识
            $("#topicBtn").trigger("click"); // 绑定点击事件
            $("#my-topic").trigger("click");
            $("#topicBtn").addClass("current-now"); // 添加样式
            $(".tab-line").css("margin-left", "384px"); // 设置 CSS 属性
            $('#my-topic').addClass("choose-item").siblings().removeClass("choose-item");
        }
    }, 300);
});