西西木科技丨Shopify开发机构 2022-07-07 22:16 采纳率: 96.4%
浏览 52
已结题

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

需要滚动到对应位置后，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>
  • 写回答

2条回答 默认 最新

  • CSDN专家-天际的海浪 2022-07-07 22:22
    关注

    你题目的解答代码如下：

    <!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>

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

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 7月16日
  • 已采纳回答 7月8日
  • 修改了问题 7月7日
  • 创建了问题 7月7日

悬赏问题

  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥60 许可证msc licensing软件报错显示已有相同版本软件，但是下一步显示无法读取日志目录。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统，原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时，终端显示出了sequence handled的进度条，但是并不出结果就自动终止回到命令提示行了是怎么回事：
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题
  • ¥80 部署运行web自动化项目
  • ¥15 腾讯云如何建立同一个项目中物模型之间的联系
  • ¥30 VMware 云桌面水印如何添加