在我的应用程序中,我有 4 个不同的链接 ID
s 和 4 DIV
与相同ID
作为每个链接(我将它们用于锚定跳跃)。
我当前的代码:
<a href="#1" id="go1" class="btn" data-anchor="relativeanchor">One</a>
<a href="#2" id="go2" class="btn" data-anchor="relativeanchor">Two</a>
<a href="#3" id="go3" class="btn" data-anchor="relativeanchor">Three</a>
<a href="#4" id="go4" class="btn" data-anchor="relativeanchor">Four</a>
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
有时用户只是滚动到第二个 div id="2"
首先在他们点击按钮之前,当他们点击按钮时,他们会被发送到顶部 id="1"
首先而不是继续下一个ID
id="3"
.
使用 CSS
一次只能看到一个按钮单击链接时,我会删除该链接。
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
如果用户向下滚动,我该如何实现,每个链接都具有相同的 ID
作为 DIV
被删除。
例如: 如果用户向下滚动到 <div class="col-md-12" id="1">
, <a href="#" id="1" class="btn">One</a>
被删除,下一个链接将是 <a href="#" id="2" class="btn">Two</a>
点击。
PS:这是动态页面和ID
s 会改变,所以我们可能需要另一个选择器
这是我迄今为止尝试过的方法,但问题是它删除了所有链接,而不仅仅是第一个链接
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS:顺便HTML
& CSS
设置不需要这样,我可以将其更改为对功能更好的设置
最佳答案
动态化没问题:
JSFiddle:https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
<a href="#1" class="btn">One</a>
<a href="#2" class="btn">Two</a>
<a href="#3" class="btn">Three</a>
<a href="#4" class="btn">Four</a>
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>
关于javascript - 删除滚动条上的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41312786/