使用jQuery導航到hashtag - 顯示/隱藏內容

Question

我有一個頁面，其中有3個佔位符和文本。這些都隱藏在page_load上，jQuery根據是否存在hashtag將它們設置爲可見。

我想要使用內嵌鏈接使用標籤，如<a href="#references"></a>。根據標籤，我想顯示/隱藏其他內容。

使用querystrings很容易上班，但不幸的是，這將給我的情況下非常糟糕的搜索引擎優化。

我得到了一個解決方案，但有一個主要問題。當用戶點擊我的頂部菜單（附加hashtag）時，它會轉到鏈接，但是我的jQuery首先在第二次點擊時運行。會發生以下情況：

1. 我們對URL http://www.domain.com
2. 用戶點擊我的菜單上，網址爲http://www.domain.com#info，但沒有在標記
3. 用戶點擊菜單中的第二次改變，網址是同樣的，但現在的標記改變

我的jQuery腳本：

<script> 
     $(document).ready(function() { 
      updateview(); 
     }); 

     function updateview() { 
      if (document.location.hash.search('calculator') !== -1) { 
       $("#ContentContainer").hide(); 
       $("#VideoPnl").hide(); 
       $("#CalculatorPnl").show(); 
      } 
      else if (document.location.hash.search('video') !== -1) { 
       $("#CalculatorPnl").hide(); 
       $("#VideoPnl").show(); 
       $("#ContentContainer").hide(); 
      } else { 
       $("#ContentContainer").show(); 
       $("#CalculatorPnl").hide(); 
       $("#VideoPnl").hide(); 
      } 
     } 

我的菜單

在我的菜單每一個菜單點有以下的JavaScript補充說，這是我希望會改變，當點擊屏幕，但這一個第一工作第二次：

menu.Attributes.Add("onclick", "javascript:updateview()"); 

我在ASP.NET標記：

<asp:Panel runat="server" ID="ContentContainer" ClientIDMode="Static"> 
     <asp:Literal runat="server" ID="ContentPlaceholder"></asp:Literal> 

    </asp:Panel> 

    <asp:Panel ID="CalculatorPnl" runat="server" ClientIDMode="Static"> 
     <asp:Literal runat="server" ID="CalculatorHeadlineLtl"></asp:Literal> 
     <asp:Literal runat="server" ID="CalculatorPlaceholder"></asp:Literal> 
    </asp:Panel> 

    <asp:Panel ID="VideoPnl" runat="server" ClientIDMode="Static"> 
     <asp:Literal runat="server" ID="VideoHeadlineLtl"></asp:Literal> 
     <asp:Literal runat="server" ID="VideoPlaceholder"></asp:Literal> 
    </asp:Panel> 

Answer 1

的updateview從點擊處理程序內調用。當updateview函數第一次執行時，url沒有散列。所有點擊處理程序執行完畢後，哈希將被追加到網址中。爲了demostate的是，重寫updateview如下：

function updateview(evt) { 
    if (evt && evt.preventDefault) { 
     evt.preventDefault(); 
    } else if (event) { 
     event.returnValue = false; 
    } 

    if (document.location.hash.search('calculator') !== -1) { 
     $("#ContentContainer").hide(); 
     $("#VideoPnl").hide(); 
     $("#CalculatorPnl").show(); 
    } 
    else if (document.location.hash.search('video') !== -1) { 
     $("#CalculatorPnl").hide(); 
     $("#VideoPnl").show(); 
     $("#ContentContainer").hide(); 
    } else { 
     $("#ContentContainer").show(); 
     $("#CalculatorPnl").hide(); 
     $("#VideoPnl").hide(); 
    } 
} 

第5行防止做它的默認操作，它是遵循鏈接和散列追加到URL的事件。現在，如果您點擊菜單，則無論您點擊多少次，都不會發生任何事情。此外，如果您使用先前的代碼，第二次單擊某個其他菜單項時，您仍然會看到上一個菜單項的div。

現在很清楚爲什麼這個問題正在發生的事情，我能想到的解決方法是： - 使用事件對象 獲得哈希 - 顯示正確的DIV - 讓事件冒泡

你的避風港沒有顯示你的菜單代碼，所以我假設它是一個ul其中每個li包含一個a標籤，它具有所需的href集。我還假設點擊處理程序被添加到每個錨標記。

代碼相同的：

$(document).ready(function() { 
     var hash = document.location.hash; 
     updateview(hash); 
    }); 

function updateview(hash) { 

    if (!hash) { 
     hash = document.location.hash; 
    } 

    if (hash.search('calculator') !== -1) { 
     $("#ContentContainer").hide(); 
     $("#VideoPnl").hide(); 
     $("#CalculatorPnl").show(); 
    } 
    else if (hash.search('video') !== -1) { 
     $("#CalculatorPnl").hide(); 
     $("#VideoPnl").show(); 
     $("#ContentContainer").hide(); 
    } else { 
     $("#ContentContainer").show(); 
     $("#CalculatorPnl").hide(); 
     $("#VideoPnl").hide(); 
    } 
} 

function menuClick(evt) { 
    if (!evt) { 
     evt = window.event; 
    } 

    var target = (evt.currentTarget) ? evt.currentTarget : evt.srcElement, 
     hash = target.getAttribute('href'); 

    updateview(hash); 
} 

的變化是，updateview接受散列作爲參數。在準備就緒後，該參數從document.location.hash提供。在點擊處理程序中，它從被點擊的anchor標記的href中獲得它的值。 menuClick是您需要綁定到菜單中的每個anchor標記的點擊處理程序。

我不在WebForms中編寫代碼，所以我無法幫助您確切的語義。我希望你足夠了解問題的原因和我的預期解決方案。