javascript - 選択したメニュー項目を JSP で設定する

Question

新しいページにリンクする、選択したメニュー項目を強調表示しようとしています。背景画像を明るい画像に交換すると機能しますが、設定がページ上で遅れています。インデックス ページは正しいですが、前にクリックしたメニュー項目が強調表示され始めます。

request.setAttribute("menuitem","home")すべてのページで JSP ( ) のセッション属性を使い始めました。ページは 2 つの部分で構成されています。

• ヘッダ
• 体

メニューはヘッダーにあり、メニュー項目をクリックするとページ全体がリロードされます。追加setAttributeは、各ページの本文の上部にあるスクリプトレットを介して行われます。ページの読み込みが完了したら、クラスを強調表示に変更します。

変更の強調表示に対するこの遅い応答をどのように解決できますか? ? または、別の方法を使用する必要がありますか? メニュー項目の例:

<div id="home" class="menu clickable" 
    <div>Home</div> 
</div>

スクリプト：

<script>
    function checkMenuItem() {
        /*var selected=getMenuItem("selectedmenu");*/
        var selected = <%= (String) request.getAttribute("selectedmenu") %>
        if (selected != null && selected != "") {
            switch (selected) {
            case 'home':
                $("#home").removeClass('clickable').addClass('selected');
                $(".menu").not("#home").addClass('clickable'); <% chosenpage = "home";
                request.setAttribute("selectedmenu", chosenpage); %>
                break;
            case 'upload':
                $("#upload").removeClass('clickable').addClass('selected');
                $(".menu").not("#upload").addClass('clickable'); <% chosenpage = "upload";
                request.setAttribute("selectedmenu", chosenpage); %>
                break;
            case 'question':
                $("#question").removeClass('clickable').addClass('selected');
                $(".menu").not("#question").addClass('clickable'); <% chosenpage = "question";
                request.setAttribute("selectedmenu", chosenpage); %>
                break;
            case 'plan':
                $("#plan").removeClass('clickable').addClass('selected');
                $(".menu").not("#plan").addClass('clickable'); <% chosenpage = "plan";
                request.setAttribute("selectedmenu", chosenpage); %>
                break;
            case 'indication':
                $("#indication").removeClass('clickable').addClass('selected');
                $(".menu").not("#indication").addClass('clickable'); <% chosenpage = "indication";
                request.setAttribute("selectedmenu", chosenpage); %>
                break;
            default: $("#home").removeClass('clickable').addClass('selected');
              $(".menu").not("#home").addClass('clickable');
             break;
           }
        } //end if
    }



    $('document').ready(function () {
     checkMenuItem();    
         $("#home").click(
                 function(){ document.location.href="<%=request.getContextPath()%>/index.html";} );
         $("#upload").click(
                 function(){ document.location.href="<%=request.getContextPath()%>/upload.html";} );
         $("#indicator").click(
                 function(){ document.location.href="<%=request.getContextPath()%>/plan/indicator.html";} );
         $("#plan").click(
                 function(){ document.location.href="<%=request.getContextPath()%>/plan/improvementplans.html";} );
         $("#question").click(
                 function(){ document.location.href="<%=request.getContextPath()%>/question.html";} );
    });
</script>