0

I have a page, which has 3 placeholders with text. These are all hidden on page_load, and jQuery sets them to visible depending on whether there is a hashtag or not.

I want to use inline linking using hashtags like <a href="#references"></a>. Depending on the hashtag, I want to show/hide other content.

It would be easy to get to work using querystrings, but unfortunately, that will give very bad search engine optimization in my case.

I got a solution working, but there is one major problem. When the user clicks my menu in the top, which appends the hashtag, it goes to the link, but my jQuery is first run on the second click. The following happens:

  1. We are on URL http://www.domain.com
  2. The user clicks on my menu and the url is http://www.domain.com#info , but nothing changed in the markup
  3. The user clicks the menu the second time, url is same, but now the markup changes

My jQuery script:

 <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();
            }
        }

My menu

Every menu point at my menu have the following JavaScript added, which I hoped would change the screen when clicking, but this one first works the second time:

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

My markup in 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>
4

1 に答える 1

1

はupdateview、クリック ハンドラー内から呼び出されます。関数が初めて実行されるときupdateview、URL にはハッシュがありません。すべてのクリック ハンドラが実行された後、ハッシュが URL に追加されます。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 にハッシュを追加するというデフォルトのアクションを実行するのを防ぎます。メニューをクリックしても、何回クリックしても何も起こりません。また、以前のコードでは、2 回目に他のメニュー項目をクリックすると、前のメニュー項目の div がまだ表示されていました。

問題が発生した理由が明らかになったので、考えられる解決策は次のとおりです。 - イベント オブジェクトを使用してハッシュを取得する - 正しい div を表示する - イベントをバブルアップさせる

メニューのコードを表示していないので、それぞれに必要な href セットを持つタグが含まれているul場所であると想定しています。また、各アンカー タグにクリック ハンドラーが追加されていることも想定しています。lia

同じコード:

$(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ハッシュをパラメーターとして受け入れることです。dom ready では、このパラメータには から値が提供されますdocument.location.hash。クリック ハンドラーでは、クリックされhrefたanchorタグの から値を取得します。メニューの各タグにmenuClickバインドする必要があるクリック ハンドラーです。anchor

私は WebForms でコードを書いていないので、正確なセマンティクスについてはお答えできません。問題の原因と私の意図した解決策を十分に理解していただければ幸いです。

于 2012-11-24T13:22:12.403 に答える