Javascript在頁面加載時激活

我在我的網站上的一個頁面內有一個導航菜單，它已將JavaScript應用於它以突出顯示當前選定的鏈接。Javascript在頁面加載時激活

問題是我在我的主頁上有相同的菜單，當我點擊主頁上的鏈接時，它會轉到預期的部分，但它最初不會突出顯示相應的鏈接。

例如，在主頁上有一個帶有鏈接的導航菜單[1,2,3,4,5,6]。現在在網站上的「寫作」頁面中，也有相同的導航鏈接{1,2,3等。]「寫作」頁面上的鏈接應用了javascript，因此當點擊鏈接時它會突出顯示所選的鏈接。但是當我點擊主頁上的鏈接1時，它將轉到「寫入」頁面上的鏈接1，但鏈接不會被突出顯示。我將不得不點擊另一個鏈接，然後回到它來突出顯示它。

這裏是「寫作」頁面中用於導航菜單的編碼：

<div id="article-nav-container"> 

     <ul id="article-nav-pg"> 
      <li><a href="articles.php?article=article_name1#articles-top">1</a></li> 
      <li><a href="articles.php?article=article_name2#articles-top">2</a></li> 
      <li><a href="articles.php?article=article_name3#articles-top">3</a></li> 
      <li><a href="articles.php?article=article_name4#articles-top">4</a></li> 
      <li><a href="articles.php?article=article_name5#articles-top">5</a></li> 
      <li><a href="articles.php?article=article_name6#articles-top">6</a></li> 
     </ul> 

     <script type="text/javascript"> 
       $(document).ready(function() { 
      var loc = window.location.href; // The URL of the page we're looking at 
      $('#article-nav-pg a').each(function() { 
       if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor 
         $(this).addClass('selected'); // Mark it as selected 
       } 
      }); 
     }); 
     </script> 

    </div><!-- end articles nav -->

的網頁導航（不需要JavaScript）的編碼是：

<ul id="article-nav"> 
     <li><a href="articles.php?article=article_name1">1</a></li> 
     <li><a href="articles.php?article=article_name2">2</a></li> 
     <li><a href="articles.php?article=article_name3">3</a></li> 
     <li><a href="articles.php?article=article_name4">4</a></li> 
     <li><a href="articles.php?article=article_name5">5</a></li> 
     <li><a href="articles.php?article=article_name6">6</a></li> 
    </ul>

我將不勝感激任何有助於瞭解如何將JavaScript效果鏈接到主頁導航菜單，以便單擊鏈接時，相應頁面將加載所選鏈接。使用現有的JavaScript或任何其他技術。希望這不是太混亂。

這裏是鏈接到該網站：here

感謝，

gdinari

來源

2010-07-21 gdinari

主頁上的鏈接是這樣的：articles.php?article=article_name4。

關閉網頁中的鏈接是這樣的：articles.php?article=article_name4#articles-top

當你點擊第一個鏈接，它會檢查，看看是否能後的網址是前者URL的字符串。這不是，所以沒有選擇。

＃articles-top究竟有必要嗎？

來源

2010-07-21 05:13:36 user11977

（如果有必要，而不是直接使用this.href你會想剝離片段 - 使用indexOf找到＃的位置，然後取出子字符串。） – user11977 2010-07-21 05:15:52

謝謝！它像一個魅力。我需要添加錨標記，因此用戶不必向下滾動文章的頁面。我只是將主播添加到主頁並且工作正常！再次感謝 – gdinari 2010-07-23 15:01:28

在這條線， '這個' 不解決錨定，

if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor

下面的作品，

if (loc.indexOf($(this).attr('href')) !== -1) { // If the URL contains the href of the anchor

來源

2010-07-21 05:25:57

我很感謝您的意見。我處理一個簡單的不匹配錯誤。當我將這些鏈接設置爲相同時，javascript效果就按照它的意圖應用。謝謝！ – gdinari 2010-07-23 15:02:58

Javascript在頁面加載時激活

回答

相關問題