如何用css/javascript顯示活動頁面/選項卡？

-2

我想要做的非常相似，這個網站的內容：http://feed-the-beast.com/如何用css/javascript顯示活動頁面/選項卡？

在哪裏，當你點擊導航鏈接，頁面將向下滑動到相應的ID，和「活躍」的導航鍵以某種方式突出顯示。我怎樣才能做到這一點？我也想爲多個頁面執行此操作，因爲我還將爲論壇另設一個頁面。

編輯：我怎樣才能完成向下滑動頁面？

來源

2013-03-28 Alex Mohr

右鍵單擊該頁面查看源代碼。它似乎是一個簡單的Javascript和HTML。沒什麼神奇的 – hop

看看源代碼，用javascript完成它 – DavidB

我意識到它純JS的聲音我只是不熟悉JS，但有一點解釋，我可以很容易地找到它。我只想自己編輯它，而不僅僅是複製/粘貼該網站（也是版權） –

在這裏看到演示：http://jsfiddle.net/4sGmG/1/

HTML：

<nav> 
    <a href="#one">One</a> 
    <a href="#two">Two</a> 
    <a href="#three">Three</a> 
    <a href="#four">Four</a> 
    <a href="#five">Five</a> 
</nav> 

<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div> 
<div id="four">Four</div> 
<div id="five">Five</div>

的jQuery：

$('nav a').on('click', function() { 
    var activeDiv = $(this).attr('href'); 

    //setActiveMenuItem($(this)); 

    $('html, body').animate({ 
     scrollTop: $(activeDiv).offset().top 
    }, 2000);   
}); 

$(window).on('scroll', function(e) { 
    var bodyTop = $(document).scrollTop(); 

    $('div').each(function() { 
     var offset = $(this).offset().top - $(window).scrollTop(); 

     if (offset >= 0) { 
      setActiveMenuItem($(this).attr('id')); 

      return false; 
     } 
    }); 
}); 

function setActiveMenuItem(id) { 
    $('a[href=#' + id + ']').addClass('active'); 
    $('a[href=#' + id + ']').siblings().removeClass('active'); 
}

來源

2013-03-28 19:06:36

我對JS不是很熟悉。 siblings（）和animate（）函數做了什麼？這也包括只是手動向下滾動頁面，就像它在OP的網站上一樣？ –

'兄弟姐妹（）'選擇與選定元素相同級別上的所有元素。 'animate（）'動畫改變樣式，在這種情況下，它向下滾動頁面。不，它不包含手動滾動，但您也可以使用jQuery/JavaScript來做到這一點。 –

@Xzar我更新了我的答案並添加了一個工作演示。你能接受答案嗎？ –

基本錨導航，使用JavaScript（jQuery的）軟化，會做的伎倆。熟悉Firebug或Chrome的開發者工具，看看該網站是如何完成的。

Twitter Bootstrap提供了ScrollSpy，這也是一種有用的位置檢測機制。 http://twitter.github.com/bootstrap/javascript.html#scrollspy

來源

2013-03-28 19:07:13 isherwood

太好了，謝謝。我會看看這個。 –

如何用css/javascript顯示活動頁面/選項卡？

回答

相關問題