html - 向所选菜单添加活动类并删除默认值

Question

我创建了要突出显示所选菜单的 Web 应用程序。

以下是我所拥有的

<div style="width: 80%;" align="left" >
    <span  style="display:inline-block;" align="left" >
        <div id="menubar" class="grid-block">
            <nav id="menu">
                <ul class="menu menu-dropdown ">
                    <li class="level1 item101 active">
                        <a href="index.xhtml" class="level1">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>
                                Home
                            </span>
                        </a>
                    </li>
                    <li class="level1 item102 parent makeSpace default" 
                        style="#{!PersonalInformationDataBean.pageViewData.contains('registerForPatentss') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('success') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('getReportss') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('searhPatentss')  ?'display:none':'display:inherit'};">
                        <a href="" class="level1 parent">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>Projects/Inventions
                            </span>
                        </a>
                        <div class="dropdown columns1">
                            <div class="dropdown-bg" style="overflow: hidden; width: 239px; height: 202px; ">
                                <div>
                                    <div class="width100 column">
                                        <ul class="level2">
                                            <li class="level2 item200" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('registerForPatentss')?'display:inherit':'display:none'}">
                                                <a href="registerForPatentss.xhtml" class="level2">
                                                    <span>Register New Applicant
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item201"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('success')?'display:inherit':'display:none'}">
                                                <a href="success.xhtml" class="level2">
                                                    <span>Register New Project
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item202" style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('getReportss')?'display:inherit':'display:none'}">
                                                <a href="getReportss.xhtml" class="level2">
                                                    <span>Project Reports
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item203"  style="width: 210px;#{PersonalInformationDataBean.pageViewData.contains('searhPatentss')?'display:inherit':'display:none'}">
                                                <a href="searhPatentss.xhtml" class="level2">
                                                    <span>Search For Project
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>


                    <li class="level1 item102 parent makeSpace default"  style="#{!PersonalInformationDataBean.pageViewData.contains('systemLog') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('addUser') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('changePass') &amp;&amp; !PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:none':'display:inherit'}">
                        <a href="" class="level1 parent">
                            <span>
                                <span class="icon" style="background-image: url('images/menu/icon_menu_features.png');background-repeat: no-repeat; background-position: top center"> 
                                </span>Administrative
                            </span>
                        </a>
                        <div class="dropdown columns1">
                            <div class="dropdown-bg" style="overflow: hidden; width: 209px; height: 202px; ">
                                <div>
                                    <div class="width100 column">
                                        <ul class="level2">
                                            <li class="level2 item200" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('addUserss')?'display:inherit':'display:none'}">
                                                <a href="addUserss.xhtml" class="level2">
                                                    <span>Add User Account
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item201" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('logPatentSystemss')?'display:inherit':'display:none'}">
                                                <a href="logPatentSystemss.xhtml" class="level2">
                                                    <span>System Log
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item202" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('changePass')?'display:inherit':'display:none'}">
                                                <a href="changePass.xhtml" class="level2">
                                                    <span>Change Password
                                                    </span>
                                                </a>
                                            </li>
                                            <li class="level2 item203" style="width: 180px;#{PersonalInformationDataBean.pageViewData.contains('userlistss')?'display:inherit':'display:none'}">
                                                <a href="userlistss.xhtml" class="level2">
                                                    <span>Details Of Registered Users
                                                    </span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
    </span>
</div>

这给了我如下输出（它不一样，但有点像这样）。

Home  |   Projects     |     Administrative
           |                  |
           |                  |
           |- Men 1           |- Ad 1
           |- Men 2           |- Ad 2
           |- Men 3           |- Ad 3

现在我想做的是

1. When Men 1 is selected, <li class="level1 item102 parent makeSpace default"should change to <li class="level1 item102 parent makeSpace active"ie take out defaultand take in activeclass.

2. 当我单击时Ad 2，<li class="level1 item102 parent makeSpace default"应更改为<li class="level1 item102 parent makeSpace active"

知道如何完成这项工作吗？我在网上查了一下，但是我得到的例子是 0 级菜单。

Answer 1

查看演示

jQuery：

$("#menubar").on("click","li",function(e){
      e.preventDefault();
      e.stopPropagation();


      if($(this).hasClass("active"))
      {
        $(this).removeClass("active").addClass("default");

      }
      else
      {
                $(this).addClass("active").removeClass("default");
      }

    });

Answer 2

我所做的是在下面......

var myURL = window.location.toString();
var endIndex = myURL.lastIndexOf(".", myURL);
var startIndex = myURL.lastIndexOf("/")+1;
var pageAccessed = myURL.substr(startIndex, endIndex-startIndex);

if (pageAccessed=="successLoginss") {
$(".homemenu").addClass("active");
$(".homemenu").removeClass("default");
}

<li class="level1 item101 default homemenu">
    <a href="index.xhtml" class="level1">
        <span>
            <span class="icon" style="background-image: url('images/menu/icon_menu_home.png');background-repeat: no-repeat; background-position: top center"> 
            </span>
            Home
        </span>
    </a>
</li>

Dats it.....我知道这不是正确的方法，但我必须这样做......