2013-08-20 212 views
0

我有菜單這個非常簡單的頁面,包含三個<ul> S和內容DIV:http://jsfiddle.net/vvqPN/內容加載到DIV

的jQuery:

$(document).ready(function() { 
    $('.subcontent:gt(0)').hide(); 
    $('#menu').on('click', 'li:not(.current) a', function() { 
     $('.current').not($(this).closest('li').addClass('current')).removeClass('current'); 
     // fade out all open subcontents 
     $('.subcontent:visible').hide(600); 
     // fade in new selected subcontent 
     $('.subcontent[id=' + $(this).attr('data-id') + ']').show(600); 
    }); 
}); 

在頁面,當你點擊第一個<ul>第一個內容加載到內容div中,然後當您單擊第二個<ul>時,第二個內容加載到內容div中,第三個內容加載到第二個內容中。 我正在試圖解決的問題是,當你在頁面向下滾動,並嘗試點擊任何<ul> S中的頁面自動返回到頁面頂部。

+1

你的錨鏈接正在尋找定義爲''#不存在的,因此,將其發送給你的文件頂部的錨。你可以指定''作爲你錨鏈接的'href',或者你可以做下面建議的@kunalbhat。我建議@ kunalbhat的答案,因爲它是不顯眼的。 – crush

回答

6

使用preventDefault();禁用錨標籤(鏈接到的東西)的默認行爲。

$('#menu').on('click', 'li:not(.current) a', function (event) { //Add event 
    event.preventDefault(); 
    ... 
}); 
+0

擊敗了我。 :) –

+0

偉大的解決方案,謝謝 –

+0

有什麼更好的解決辦法,你還是另外一個,爲什麼?老實說 –

1

防止錨標記的默認點擊事件。否則,URL將被更改,並且頁面將被髮送到頂端。

$('#menu').on('click', 'li:not(.current) a', function (e) { 
    e.preventDefault(); 

http://jsfiddle.net/HM633/

+2

被重新加載頁面,或只是將它們發送到頂部,因爲錨標籤不存在? – crush

+1

沒有重新加載,只是返回頂部 –

+0

對不起,我的錯誤。 –