时间戳

首页 > 解决方案 > 单击页面上的另一个按钮时如何打开导航/选项卡？

javascript - 单击页面上的另一个按钮时如何打开导航/选项卡？

问题描述

我需要帮助做一件事。我创建了一个页面，单击一个按钮会将页面滚动到带有按钮/书签侧面板的部分。我是用 JS 脚本完成的，我希望在单击同一个按钮后执行下一个操作。我已经尝试使用 click() 方法来做到这一点，我还尝试将“活动”类添加到面板的选项卡之一 - 不幸的是，一切都没有积极的结果。最后，也许你们中的一个人能够帮助我。

最终，我希望第一个链接切换下面的活动部分选项卡。为了更好地说明，我正在发送页面的图片。

JS 文件（注释行是我之前尝试使用的代码）：

function scrollWin() {
    window.scrollBy({ top: 500, left: 0, behavior: 'smooth' });
    //const prescription = document.querySelector("#tab-title-prescription_tab");
    //prescription.classList.add("active");
    //document.getElementById("tab-title-prescription_tab").click();
}

HTML 代码：

<ul class="tabs wc-tabs" role="tablist">
    <li class="description_tab" id="tab-title-description" role="tab" aria-controls="tab-description"> <a href="#tab-description"> Opis </a></li>
    <li class="additional_information_tab" id="tab-title-additional_information" role="tab" aria-controls="tab-additional_information"> <a href="#tab-additional_information"> Dodatkowe informacje </a></li>
    <li class="reviews_tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews"> <a href="#tab-reviews"> Opinie (0) </a></li>
    <li class="prescription_tab_tab active" id="tab-title-prescription_tab" role="tab" aria-controls="tab-prescription_tab"> <a href="#tab-prescription_tab"> Recepta </a></li>
    <li class="survey_tab_tab" id="tab-title-survey_tab" role="tab" aria-controls="tab-survey_tab"> <a href="#tab-survey_tab"> Badania </a></li>
</ul>

图片：

https://imgur.com/fqu4GyG

第一个按钮：

<a onclick="scrollWin()" href="#tab-prescription_tab" class="button additional-button">Wybór szkieł</a>'

标签： javascriptcss

解决方案

锚不工作？也许您会将按钮设置为链接并设置href="#tab-prescription_tab"

推荐阅读