tab标签切换问题位置错乱，滚动位置错乱

Question

增加了一个tab标签，但是点击的时候第二个标签并不显示，点击第四个标签，结果第二个变色，并且根据滚动位置显示不同的tab

//以前代码
<div class="topboxs yx_home"></div>
        <div class="topbox" id="thetitle" style="display:none;">
            <div class="toptitle topselect">产品介绍
                <span class="selectspan"></span>
            </div>
            <div class="toptitle">产品流程
                <span class="selectspan"></span>
            </div>
            <div class="toptitle">产品问题
                <span class="selectspan"></span>
            </div>
        </div>
        <!-- syx-首页改造 -->
        <div id="index">
            <img id="pro_img"/ onload="loadImage()">
            <div class="yxhomebox">
          </div>
        </div>
//现在代码
<div class="topboxs yx_home"></div>
        <div class="topbox" id="thetitle" style="display:none;">
            <div class="toptitle topselect">产品链接
                <span class="selectspan"></span>
            </div>
            <div class="toptitle">产品介绍
                <span class="selectspan"></span>
            </div>
            <div class="toptitle">产品流程
                <span class="selectspan"></span>
            </div>
            <div class="toptitle">产品问题
                <span class="selectspan"></span>
            </div>
        </div>
        <!-- syx-首页改造 -->
        <div id="index">
            <div class="top_home_ybtx" id="top_home">
                <p>xx产品信息一共<span>X个</span>系统将使用家庭单计算费用。
                    1.请逐一填写下方链接，待所有链接填写完成后，再统一提交订单，系统将逐笔扣款，生成X个投保单。
                    2.第一个链接填写完成后，才能填写后续链接，且信息自动同步，若需修改信息，需返回第一个链接修改。</p>
                <ul class="top_home_ybtx_tip">
                    <li class="top_home_ybtx_tips">
                        <img />
                        <div class="top_home_ybtx_div">
                            <p class="top_home_ybtx_divp">发发发（瑞臻版）</p>
                        </div>
                    </li>
                </ul>
            </div>
            <img id="pro_img"/ onload="loadImage()">
            <div class="yxhomebox">
          </div>
        </div>

//syx-营销首页改造
if(filurl[1]=="YINGXIAO"||filurl[1]=="EMT"){
    $(".qr_box").hide();
    $(".ewmimg").show();
    $("#index").css("paddingBottom","2.2rem");
    if(productId){
        $("#thetitle").show();
    }else{
        $(".yx_home").show();
        $("#twotitle").show();
        $("#thetitle").remove();
    }
    if(!is_agent){
        $(".bottom_box").hide();
        $(".toptitle").width("25%");
    }else{
        $(".commom_position_bottom").hide();
        $(".toptitle").width("25%");
    }
}else{
  $("#index").css("height",$(window).height()-$(".bottom_box").height());
}
function yxhome(){
    if(filurl[1]=="YINGXIAO"||filurl[1]=="EMT"){
        $("#index").css("height",$(window).height()-$(".bottom_box").height());
        $(".yxhomebox").html("");
        $(".yxhomebox").append('<div class="lpbox yx_home"><img src="images/lpbox.jpg"></div><div class="quest_box yx_home"><img src="images/cjwt.jpg" style="margin-left:-0.4rem;"><ul>    </ul></div>')
        $(".yx_home").show();
        if(!is_agent){
            $(".bottom_box").hide();
        }else{
            $(".commom_position_bottom").hide();
        }
        if(productId){
            // 常见问题
            $.ajax({
                type: "post",
                url:commonurl+"queryCommonProblem",
                data:JSON.stringify({"productId":productId}),
                contentType: "application/json",
                success: function(data){
                    if(data.result_code==0){
                        if(data.problems){
                            for(var i=0;i<data.problems.length;i++){
                                $(".quest_box ul").append('<li><div class="quest_boxs"><img class="quest_icon" src="images/quest.jpg"><div class="quest_info">'+data.problems[i].problem+'</div><img class="quest_up" src="images/icon_arrow_bottom.png"></div><div class="answer">'+data.problems[i].answer+'</div></li>')
                            }
                            $(".quest_box .quest_boxs").click(function(){
                                if($(this).next(".answer").css("display")=="none"){
                                    $(this).find(".quest_up").css("transform","rotate(180deg)");
                                    $(this).next(".answer").show();
                                    var tagname=$(this).next(".answer").children().attr("tagName");
                                    $(this).next(".answer").children(tagname).eq(0).prepend('<img class="quest_icon answer_icon" src="images/answer.jpg">');
                                }else{
                                    var tagname=$(this).next(".answer").children().attr("tagName");
                                    $(this).next(".answer").children(tagname).eq(0).find(".quest_icon").remove();
                                    $(this).find(".quest_up").css("transform","rotate(0deg)");
                                    $(this).next(".answer").hide();
                                }
                            })
                        }
                        funcReadImgInfo()
                    }else{
                        $("#thetitle").remove();
                        $("#twotitle").show();
                        $(".quest_box").hide();
                        $(".selectspan").eq(0).show();
                        productId=null;
                  $("#index").css("paddingBottom","1.8rem");
                    }
                }
            })
        }else{
            $(".quest_box").hide();
      $("#index").css("paddingBottom","1.8rem");
        }
        var topclick=0;
        $(".selectspan").eq(0).show();
        $(".toptitle").click(function(){
            $(".toptitle").removeClass("topselect");
          $(".selectspan").hide();
          $(this).addClass("topselect");
          $(this).find(".selectspan").show();
            if($(this).index()=="0"){
                topclick=1;
                $("#index").scrollTop(0);
            }else if($(this).index()=="1"){
                var imgheight=$("#pro_img").height();
                $("#index").scrollTop(imgheight-10);
                topclick=2;
            }else if($(this).index()=="2"){
                var imgheight=$("#top_home").height()+$("#pro_img").height();
                topclick=3;
            }else if($(this).index()=="3"){
                var imgheight=$("#top_home").height()+$("#pro_img").height()+$(".lpbox").height();
                $("#index").scrollTop(imgheight-10);
                topclick=4;
            }
        })
        //监听滚动事件
        document.getElementById('index').onscroll = function() {
                        var topheight=$("#top_home").height();//客户端
            var imgheight=$("#pro_img").height();
            var lpboxheight=$(".lpbox").height();
            if(!productId){
                if($("#index").scrollTop()<imgheight){
          if(topclick==2){
                        $(".toptitle").eq(1).addClass("topselect");
                        $(".toptitle").eq(1).find(".selectspan").show();
            return;
                    }
                    if($(".toptitle").eq(0).attr("class")=="toptitle toptitles topselect"){
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    $(".toptitle").eq(0).addClass("topselect");
                    $(".toptitle").eq(0).find(".selectspan").show();
                }
                if($("#index").scrollTop()>=imgheight){
                    if($(".toptitle").eq(1).attr("class")=="toptitle toptitles topselect"){
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    $(".toptitle").eq(1).addClass("topselect");
                    $(".toptitle").eq(1).find(".selectspan").show();
                }
            }else{
                if($("#index").scrollTop()<imgheight){
                    if($(".toptitle").eq(0).attr("class")=="toptitle topselect"){
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    if(topclick==3){
                        $(".toptitle").eq(1).addClass("topselect");
                        $(".toptitle").eq(1).find(".selectspan").show();
                    }else{
                        $(".toptitle").eq(0).addClass("topselect");
                        $(".toptitle").eq(0).find(".selectspan").show();
                    }
                }
                if($("#index").scrollTop()>=imgheight&&$("#index").scrollTop()<(imgheight+lpboxheight)){
                    if($(".toptitle").eq(1).attr("class")=="toptitle topselect"){
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    if(topclick==3){
                        $(".toptitle").eq(2).addClass("topselect");
                        $(".toptitle").eq(2).find(".selectspan").show();
                    }else{
                        $(".toptitle").eq(1).addClass("topselect");
                        $(".toptitle").eq(1).find(".selectspan").show();
                    }
                }
                if($("#index").scrollTop()>(imgheight+lpboxheight)){
                    if($(".toptitle").eq(2).attr("class")=="toptitle topselect"){
                        return;
                    }
                    $(".toptitle").removeClass("topselect");
                    $(".selectspan").hide();
                    $(".toptitle").eq(2).addClass("topselect");
                    $(".toptitle").eq(2).find(".selectspan").show();
                }
            }
      };
    }
}
function loadImage(){
    yxhome();
}

.yx_home{
    display: none;
    background:white;
}
.topboxs{
    width: 100%;
    height: 1.8rem;
    z-index:10;
}
.topbox{
    display: flex;
    align-content: center;
    height: 1.8rem;
    position: fixed;
  top:0;
    left: 0;
    right: 0;
    z-index:10;
    background:white;
}
.toptitle{
    display: inline-block;
  position:relative;
    text-align: center;
    line-height: 1.8rem;
    font-size: 0.7rem;
    font-weight: 500;
    width: 25%;
    flex-shrink: 0;
}
.toptitles{
    width: 50%;
}
.topselect{
    color: #029dff;
}
.selectspan{
    width: 20%;
    height: 0.12rem;
    background: #029dff;
    position: absolute;
    left: 40%;
    bottom: 0;
    border-radius: 0.1rem;
    display: none;
}

Answer 1

我妈已经三天没打我了 下午好🌅🌅🌅
本答案参考通义千问

问题分析：

• 点击第二个标签时，它显示为第二个被选中的颜色，而滚动位置似乎也影响到了tab的切换逻辑。
• 代码中添加了新的内容和滚动监听事件，可能导致原本的tab切换逻辑与新内容交互出现问题。

解决方案：

1. 调整topclick变量处理： 更新yxhome函数中的topclick变量处理，确保当滚动到不同内容区域时，正确切换对应的toptitle。

// 更新topclick变量处理
if ($("#index").scrollTop() >= imgheight && ($("#index").scrollTop() - imgheight) < lpboxheight) {
  if (topclick == 2) {
    $(".toptitle").eq(2).addClass("topselect");
    $(".toptitle").eq(2).find(".selectspan").show();
  } else {
    $(".toptitle").eq(1).addClass("topselect");
    $(".toptitle").eq(1).find(".selectspan").show();
  }
} else if ($("#index").scrollTop() >= imgheight + lpboxheight) {
  if (topclick == 2 || topclick == 3) {
    $(".toptitle").eq(3).addClass("topselect");
    $(".toptitle").eq(3).find(".selectspan").show();
  } else {
    $(".toptitle").eq(2).addClass("topselect");
    $(".toptitle").eq(2).find(".selectspan").show();
  }
}

1. 优化滚动事件判断： 根据当前滚动位置，精确判断应该显示哪个tab，避免滚动时导致其他元素错位。

// 更新滚动事件处理
document.getElementById('index').onscroll = function() {
  var topheight = $("#top_home").height(); // 客户端
  var imgheight = $("#pro_img").height();
  var lpboxheight = $(".lpbox").height();

  if ($("#index").scrollTop() < imgheight) {
    if (topclick == 1) {
      $(".toptitle").eq(0).addClass("topselect");
      $(".toptitle").eq(0).find(".selectspan").show();
      return;
    }
    // ... 其他条件判断 ...

  } else if ($("#index").scrollTop() >= imgheight && ($("#index").scrollTop() - imgheight) < lpboxheight) {
    // ... 更新topclick为3 ...
  } else if ($("#index").scrollTop() >= imgheight + lpboxheight) {
    // ... 更新topclick为4 ...
  }

  // ... 其他滚动位置对应的判断 ...
};

1. 修复滚动后可能存在的样式问题： 如果滚动到某些特定位置时，可能需要重新调整样式以保证正确显示。

// 在适当的位置添加滚动后的样式调整
if ($("#index").scrollTop() >= imgheight + lpboxheight) {
  // 添加或修改这里的样式，例如：
  $(".toptitle").eq(3).css({
    'color': '#029dff', // 如果颜色有问题
    'font-size': '0.7rem', // 如果字体大小有问题
  });
}

通过以上调整，应该能解决滚动位置错乱和tab切换问题。记得在实际项目中测试以确保代码的适用性。