其他手机的tab是正常显示的
苹果手机为什么显示异常,该怎么改呢
.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;
justify-content: space-around;
}
.toptitle{
display: inline-block;
position:relative;
text-align: center;
line-height: 1.8rem;
font-size: 0.7rem;
font-weight: 500;
}
/* .toptitles{
width: 49.5%;
} */
.topselect{
color: #029dff;
}
.selectspan{
width: 43%;
height: 0.12rem;
background: #029dff;
position: absolute;
left: 30%;
bottom: 0;
border-radius: 0.1rem;
display: none;
}
.bottom_box{
width: 100%;
height:2.1rem;
position: fixed;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 10;
border-top: 1px solid #f2f1f1;
}
<!-- syx-首页改造 -->
<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>
<!-- 客户端首页 -->
<div class="topbox" id="theretitle" style="display:none;">
<div class="toptitle toptitlets topselect">投保链接
<span class="selectspan"></span>
</div>
<div class="toptitle toptitlets">产品介绍
<span class="selectspan"></span>
</div>
<div class="toptitle toptitlets">理赔流程
<span class="selectspan"></span>
</div>
<div class="toptitle toptitlets">常见问题
<span class="selectspan"></span>
</div>
</div>
if (is_agent) {
$(".bottom_box_fm").show();
$(".bottom_box_btn").hide();
$(".common_sigle_btn").hide();
var uc_path = commonurl_front + "home_fm.html";
var uc_id = "wxtb";
//1014 在线微投1034 保代微投不走uc
if(is_uc==null&&mode!='1014'&&mode!='1034'&&mode!='1051'&&mode!='1041'){
uc_tooken(commonurl,uc_path,uc_id,true,"false");
}else{
loading_home(sales_agent)
}
} else {
// 客户端
$(".yx_home").show();
if (is_family == '1') {
$(".bottom_box_btn").show();
$(".bottom_box_fm").hide();
$(".common_sigle_btn").hide();
$("#index").css("top", '1.8rem');
} else {
$(".common_sigle_btn").show();
$(".bottom_box_btn").hide();
$(".bottom_box_fm").hide();
loading_home(sales_agent)
}
// 20191105-探针加分享出去的客户点击
try {
if (hxcjs.getUrlString("openid_gv")) {
_hxa.push(["setIdentity", "openid", hxcjs.getUrlString("openid_gv")]);
}
} catch (err) {
console.log(err)
};
}
//syx-营销首页改造
if (filurl[1] == "YINGXIAO" || filurl[1] == "EMT") {
$("#index").css("paddingBottom", "2.2rem");
if (productId) {
// 营销
if (!is_agent) {
// 客户端首页
if (is_family == '1') {
$("#theretitle").show();
$("#top_home").show();
$("#thetitle").remove();
} else {
// 客户端首页
$(".yx_home").show();
$("#thetitle").show();
$("#theretitle").remove();
}
} else {
// 业务员首页
$(".yx_home").show();
$("#thetitle").show();
$("#theretitle").remove();
}
} else {
if(!is_agent){
// 客户端首页
if(is_family == '1'){
$("#fourtitle").show();
$("#top_home").show();
$("#twotitle").remove();
}else{
$(".yx_home").show();
$("#twotitle").show();
$("#fourtitle").remove();
}
}else{
// 业务员首页
$(".yx_home").show();
$("#twotitle").show();
$("#fourtitle").remove();
}
$(".yxhomebox").css("marginBottom", "1.8rem");
}
} 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 (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++) {
product_name = data.problems[i].product_name
$(".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();
// $("#theretitle").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 (productId) {
// 营销
if (!is_agent) {
if ($(this).index() == "0") {
topclick = 1;
$("#index").scrollTop(0);
} else if ($(this).index() == "1") {
var imgheight = $("#top_home").height();
console.log('imgheight',imgheight)
topclick = 2;
} else if ($(this).index() == "2") {
var imgheight = $("#top_home").height() + $("#pro_img").height();
console.log('啥玩意儿2', imgheight)
$("#index").scrollTop(imgheight);
topclick = 3;
} else if ($(this).index() == "3") {
var imgheight = $("#top_home").height() + $("#pro_img").height() + $(".lpbox").height();
$("#index").scrollTop(imgheight - 10);
topclick = 4;
}
console.log('topclick',topclick)
} else {
if ($(this).index() == "1") {
var imgheight = $("#pro_img").height();
$("#index").scrollTop(imgheight);
topclick = 2;
} else if ($(this).index() == "2") {
var imgheight = $("#pro_img").height() + $(".lpbox").height();
$("#index").scrollTop(imgheight - 10);
topclick = 3;
} else if ($(this).index() == "0") {
topclick = 1;
$("#index").scrollTop(0);
}
}
} else {
if (!is_agent) {} else {
}
}
})
//监听滚动事件
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 (!is_agent) {
if ($("#index").scrollTop() < topheight) {
if ($(".toptitle").eq(1).attr("class") == "toptitle toptitlets topselect") {
return;
}
$(".toptitle").removeClass("topselect");
$(".selectspan").hide();
$(".toptitle").eq(0).addClass("topselect");
$(".toptitle").eq(0).find(".selectspan").show();
}
if ($("#index").scrollTop() >= topheight && $("#index").scrollTop() < (imgheight + topheight)) {
if ($(".toptitle").eq(2).attr("class") == "toptitle toptitlets topselect") {
return;
}
$(".toptitle").removeClass("topselect");
$(".selectspan").hide();
console.log('鱼摆摆长图2')
$(".toptitle").eq(1).addClass("topselect");
$(".toptitle").eq(1).find(".selectspan").show();
}
if ($("#index").scrollTop() >= topheight + imgheight && $("#index").scrollTop() < (imgheight + lpboxheight)) {
if ($(".toptitle").eq(3).attr("class") == "toptitle toptitlets topselect") {
return;
}
$(".toptitle").removeClass("topselect");
$(".selectspan").hide();
$(".toptitle").eq(2).addClass("topselect");
$(".toptitle").eq(2).find(".selectspan").show();
}
if ($("#index").scrollTop() > (topheight + imgheight + lpboxheight)) {
if ($(".toptitle").eq(4).attr("class") == "toptitle toptitlets topselect") {
return;
}
$(".toptitle").removeClass("topselect");
$(".selectspan").hide();
$(".toptitle").eq(4).addClass("topselect");
$(".toptitle").eq(4).find(".selectspan").show();
}
} else {
if ($("#index").scrollTop() < imgheight) {
if ($(".toptitle").eq(0).attr("class") == "toptitle toptitlets 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 toptitlets 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();
}
}
}
};
}
}