gpt4 book ai didi

jquery - 第二个 Bootstrap 选项卡中的按钮闪烁

转载 作者:行者123 更新时间:2023-11-28 12:34:05 32 4
gpt4 key购买 nike

我正在 Bootstrap 选项卡中集成一个 float 按钮。第一个选项卡工作正常,但对于第二个选项卡,按钮在向下滚动到底部时闪烁。您可以在此处查看测试 html

网址:http://estatedevelopment.net/bootstrap/

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {


var stickyNavBottomval2 = $('.edit_profile_save').offset().top;
var stickyNav_bottom = function(){
var scrollBottom2 = $(window).scrollTop() + $(window).height();


if (scrollBottom2 < stickyNavBottomval2) {
$('.edit_profile_save').addClass('subnav-editprofile-sticky-bar-bottom');
} else {
$('.edit_profile_save').removeClass('subnav-editprofile-sticky-bar-bottom');
}
};
stickyNav_bottom();


var stickyNav_bottom_pre = function(){

var stickyNavBottomval2_pre = $('.edit_profile_save_pre').offset().top;

var scrollBottom2_pre = $(window).scrollTop() + $(window).height();

if (scrollBottom2_pre < stickyNavBottomval2_pre) {
$('.edit_profile_save_pre').addClass('subnav-editprofile-sticky-bar-bottom');
} else {
$('.edit_profile_save_pre').removeClass('subnav-editprofile-sticky-bar-bottom');
}
};
stickyNav_bottom_pre();



$(window).scroll(function() {


stickyNav_bottom(); stickyNav_bottom_pre();

});



});

</script>
<div style="width:100%">
<div style="width:900px; margin:auto;">
<h1>Hello, world!</h1>
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>section 1 content stats here. section 1 content stats here. </p>

<div class="float_bottom_div_s1 edit_profile_save"> <input type="submit" value="Submit" class="float_button button"></div>

</div>
<div class="tab-pane" id="tab2">

<p>section 2 content stats here. </p>

<div class="float_bottom_div_s2 edit_profile_save_pre"> <input type="submit" value="Submit" class="float_button button"></div>



</div>
</div>
</div>
</div>
<style> .button{ width:280px; height:70px;}


.subnav-editprofile-sticky-bar-bottom{
border-bottom: 0 none;
margin-bottom: 59px !important;
position: fixed;
bottom: 0;
width: 66.5%;
text-align:center;
z-index: 100;
}

.subnav-editprofile-fin-sticky-bar-bottom{
border-bottom: 0 none;
margin-bottom: 59px !important;
position: fixed;
bottom: 0;
width: 45.5%;
text-align:center;
z-index: 100;
}


</style>
</div>
</body>
</html>

最佳答案

当您在第一个选项卡中时,您的 html div 看起来像:

<div class="float_bottom_div_s2 subnav-editprofile-sticky-bar-bottom"> 
<input type="submit" class="float_button button" value="Submit">
</div>

当您单击第二个选项卡时,您的 html 会变成:

<div class="float_bottom_div_s2 edit_profile_save_pre subnav-editprofile-sticky-bar-bottom"> 
<input type="submit" class="float_button button" value="Submit">
</div>

因此当您点击第二个选项卡时,不应添加属性"edit_profile_save_pre"

关于jquery - 第二个 Bootstrap 选项卡中的按钮闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18076225/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com