需要滚动到对应位置后，js控制botton自动被点击

下面是我们的tab模块
我得需求是当页面滚动到#collapse-botton-tab1时，对应的botton自动点击，从而相应tab-content的打开
以此类推
tab的代码已经写好所以只需要实现Botton自动点击就行


<div class="wrapper-tab-content">

    <div class="tab-title">
        <botton data-taptop="" data-target="#collapse-tab1" class="tab-links" id="collapse-botton-tab1">

            <span>Custom Tab 1</span>

        </botton>
    </div>

    <div class="tab-content active" data-tabcontent="" id="collapse-tab1">

        <div>
            Custom Tab Content 1
        </div>

    </div>


    <div class="tab-title">
        <botton data-taptop="" data-target="#collapse-tab2" class="tab-links active" id="collapse-botton-tab2">

            <span>Custom Tab 2</span>


        </botton>

    </div>

    <div class="tab-content" data-tabcontent="" id="collapse-tab2" style="display: block;">

    <div>
        Custom Tab Content 2
    </div>

    </div>

    <div class="tab-title">
        <botton data-taptop="" data-target="#collapse-tab3" class="tab-links active" id="collapse-botton-tab3">

            <span>Custom Tab 3</span>

        </botton>
    </div>
    <div class="tab-content" data-tabcontent="" id="collapse-tab3" style="display: block;">


        <div>
            Custom Tab Content 3
        </div>

    </div>

</div>

你题目的解答代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style>  
@media(min-width:769px){
  .tabssfq{
    display:none;
  }
}
.tabssfq {
  overflow: hidden;
}
 
.tabsfq {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-labelsfq {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  border-top: 2px solid#fff;
  color: #000;
  font-size: 13px !important;
  border-top: 1px solid#ddd;
}
.tab-labelsfq::after {
  content: "+";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
  font-size: 15px;
}
.tab-contentsfq {
  height: 0;
  color: #000;
  transition: all 0.35s;
  font-size: 15px;
  padding:0px 10px;
}
.tab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 14px;
  background: #2c3e50;
  cursor: pointer;
}
.tab-close:hover {
  background: #1a252f;
}
input:checked + .tab-labelsfq {
  
}
input:checked + .tab-labelsfq::after {
  content: "-";
}
input:checked ~ .tab-contentsfq {
  height: fit-content;
}
  
.tabsfq input {
  display:none;     
}
</style>
    
<div style="height: 1000px; width: 20px; background-color: #999;"></div>
   
    <div class="tabssfq">
      <div class="tabsfq">
        <input type="checkbox" id="chck1">
        <label class="tab-labelsfq" for="chck1">Description</label>
        <div class="tab-contentsfq">{{product.description}}</div>
      </div>

<div style="height: 1000px; width: 20px; background-color: #999;"></div>

      <div class="tabsfq">
        <input type="checkbox" id="chck2">
        <label class="tab-labelsfq" for="chck2">Speciation</label>
        <div class="tab-contentsfq">123</div>
      </div>    
    </div> 

<div style="height: 1000px; width: 20px; background-color: #999;"></div>


<script type="text/javascript">
    window.addEventListener("scroll",function(event) {
        var bs = document.querySelectorAll(".tabsfq");//获取所有botton
        for (var i = 0; i < bs.length; i++) {
            var r = bs[i].getBoundingClientRect();
            if (r.top>=0 && r.bottom<=window.innerHeight-50) {//判断滚动到bs[i]了
                var input = bs[i].querySelector("input");
                if (input.checked==false)
                    input.checked = true;
            }
        }
    });
</script>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632