在這種情況下使用onclick事件處理程序是可以接受的嗎？

我有一個簡單的菜單子菜單。當在同一頁面上點擊子菜單中的鏈接時，窗口將使用jQuery滾動到相應的錨點。在這種情況下使用onclick事件處理程序是可以接受的嗎？

這裏是一個子菜單列表項的例子：

<li><a href="page.html#some-anchor" onclick="clickScroll('#some-anchor');"><span>foo</span></a></li>

相對應的錨栓是這樣的：

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a>

JavaScript函數：

function clickScroll(dest) { 
    $('html, body').stop().animate({ 
     scrollTop: $(dest).offset().top 
    }, 1000); 
}

這一切都完美地工作很好，但是和我之前的很多人一樣，我一直在閱讀內聯事件處理程序是不好的練習這些日子。

如何修改，以消除任何的onclick調用需要的功能？請記住，每個子菜單鏈接對應於不同的錨點。

來源

2012-08-22 Bobe

假設你想用一個哈希#所有錨滾動到相應的錨用相同的ID，就可以通過所有錨環，解析出哈希並滾動到同一ID：

$('a').each(function() { 
    if (this.hash) { 
     $(this).click(function(e) { 
      $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); 
      e.preventDefault(); 
     }); 
    } 
});

http://jsfiddle.net/nGfW5/

如果你想限制這種功能對某些錨，添加一個類，並插入它的選擇，f.ex $('a.hashlink').each(

來源

2012-08-22 07:45:33 David

這個方法我試過，以及Mythril的，但它好像在href被解析點擊功能，可以調用之前，因爲頁面只是去錨像正常的，而不是滾動。這可能嗎？如果是這樣，我應該刪除hrefs（或者只是將它們更改爲'＃'），並使用相應的ID（即＃some-anchor-link）？ – Bobe

我不明白。你有沒有像預期的那樣工作？ – David

你的例子一樣工作（爲您提供壁球結果窗口），但我不能讓它在我的代碼工作。就像你建議的那樣，我將類.submenu-link添加到子菜單中的所有錨點，並將選擇器更改爲$（'a.submenu-link'）。 – Bobe

試試這個：

$('li a').each (function() { 
    $(this).click(function() { 
     $('html, body').stop().animate({ 
      scrollTop: $(this.hash).offset().top 
     }, 1000); 
    }); 
});

來源

2012-08-22 07:44:32 codef0rmer

我覺得OP要滾動到相應的錨，不被點擊的錨的ID。 – David

使用事件處理程序：http://api.jquery.com/on/

<li><a id="some-scroll-source" href="page.html#some-anchor"><span>foo</span></a></li> 

<a class="hidden-anchor" id="some-anchor" name="some-anchor"></a> 

(function() { 
    function clickScroll() { 
     var dest = $('#' + ($(this).attr('href').split('#')[1])); 
     $('html, body').stop().animate({ 
      scrollTop: $(dest).offset().top 
     }, 1000); 
    } 

    $('#some-scroll-source').on('click', clickScroll);; 
}());

來源

2012-08-22 07:46:24

在這種情況下使用onclick事件處理程序是可以接受的嗎？

回答

相關問題