Question

我正在尝试突出显示链接到新页面的所选菜单项。将背景图像交换为较浅的图像有效，但设置在页面上滞后。索引页面是正确的，但随后它开始突出显示以前单击的菜单项。

我开始在每个页面上使用JSP的会话属性（request.setAttribute("menuitem","home")）。这些页面由两部分组成：

头
体

菜单位于标题中，点击菜单项后会重新加载整个页面。通过每页正文顶部的scriptlet添加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>

在JSP中设置选定的菜单项

0 个答案: