[英]How to prevent auto scrolling when click tab
我正在研究一個項目並且卡在標簽上。 無論我做什么,當我點擊一個標簽時頁面向下滾動。 這是我的HTML:
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a href="#quick-reports" class="tab">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a href="#my-folders" class="tab">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a href="#my-team-folders" class="tab">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a href="#public-folders" class="tab">Public Folders</a>
</li>
</ul>
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
window.location.hash = target_panel_selector ;
});
});
};
而.active-panel
的樣式是display: block
。 我試着用:
e.preventDefault();
要么
tab.find('a').on('click', function(e){
alert("finally!!");
e.preventDefault();
});
我在網上找到的其他東西,但不,不工作。
更新嘗試在click事件中添加一個返回false,並建議迭代更改哈希方法(但僅在較新的瀏覽器中工作),如下所示:
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
//window.location.hash = target_panel_selector ;
if(history.pushState) {
history.pushState(null, null, target_panel_selector);
} else {
window.location.hash = target_panel_selector;
}
return false; // <-- add this line
});
});
};
我認為在這里設置哈希時它會滾動
window.location.hash = target_panel_selector ;
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
</li>
</ul>
<script>
function maketabActive($strElement)
{
$('.list li.active').removeClass('active');
$strElement.addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $strElement.find('a').data('href');
$(target_panel_selector).addClass('active-panel');
// Save selected tab index in session stroage.So after page refresh active tab will be maintained
sessionStorage.setItem('selected-tab', $strElement.index());
}
$(document).ready(function () {
// Check if selected tab is stored in session stroage
if (sessionStorage.getItem('selected-tab'))
{
//Make tab active based on index got from session stroage
maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
}
});
var open_tab = function () {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function () {
maketabActive($(this));
});
});
};
</script>
你可以試試
event.stopPropagation();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.