简体   繁体   English

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

[英]How to open the nav/tab when I click another button on the page?

I need help with one thing.我需要帮助做一件事。 I created a page where clicking on one button will scroll the page to the section with the side panel of buttons / bookmarks.我创建了一个页面,单击一个按钮会将页面滚动到带有按钮/书签侧面板的部分。 I did it with a JS script, I would like the next action to be performed after clicking on the same button.我是用 JS 脚本完成的,我希望在单击同一个按钮后执行下一个操作。 I've already tried to do it using click() method, I've also tried to add "active" class to one of the tabs of the panel - unfortunately everything without positive result.我已经尝试使用 click() 方法来做到这一点,我还尝试将“活动” class 添加到面板的选项卡之一 - 不幸的是,一切都没有积极的结果。 Finally, maybe one of you will be able to help me.最后,也许你们中的一个人能够帮助我。

Ultimately, I want the first link to switch the active section tab below.最终,我希望第一个链接切换下面的活动部分选项卡。 For better illustration I'm sending a picture of the pages.为了更好地说明,我正在发送页面的图片。

JS file (The commented lines are the code I tried to use before): 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 code: 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>

Image:图片:

https://imgur.com/fqu4GyG https://imgur.com/fqu4GyG

First button:第一个按钮:

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

Anchor doesn't work?锚不工作? Maybe you will make your button as link and set href="#tab-prescription_tab"也许您会将按钮设置为链接并设置href="#tab-prescription_tab"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 <a>单击另一页</a>时如何打开特定选项卡, <a>然后在另一页上打开特定选项卡</a> - How to open a specific tab when <a> is click on another page and open specific tab on the other page 在MVC视图中单击“图像”时如何打开另一个页面 - How to open another page when I click on Image in MVC view 如何在ASP C#上打开新标签页,然后将焦点集中在当前页面上,然后单击按钮将当前页面重定向到另一个页面? - How to open new tab on ASP C# and focus stay on current page then current page redirect to another page on click button? 当我们单击其他页面的按钮时如何打开特定选项卡 - How to get specific tab to be open when we click the button from other page 如何在vueJs中不点击按钮的情况下在新标签页中打开页面 - How to open page in new Tab without button click in vueJs 单击按钮时跳转到另一个页面 - jump to another page when I click on a button 当我点击按钮时重新加载另一页 - Reload another page when I click on button 如何单击单击按钮以在顶部而不是在中间加载导航标签页? - How to get on click button to load the nav tab page at the top rather than in the middle? 用户单击按钮angular js时如何打开打印选项卡 - how to open print tab when user click button angular js 单击按钮时如何打开到同一选项卡的链接? - How to open a link into same tab when click a button?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM