添加活动类并将缺省值删除到所选菜单

我已经创建了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被选中，<li class="level1 item102 parent makeSpace default"应改为<li class="level1 item102 parent makeSpace active"即取出default，并采取在active类。
当我点击Ad 2，<li class="level1 item102 parent makeSpace default"应改为<li class="level1 item102 parent makeSpace active"

任何想法如何完成这件事？我在网上查询，但是我得到的例子是0级菜单。

来源

2012-10-04 Fahim Parkar

你能告诉我们你的css/js吗？ – Champ

@Champ：我试图从[** here **]（http://www.altabtabai.com/）获取菜单。不过，我的CSS很大，你可以从提供的链接中看到它。在链接上，主动被添加，但是我没有找到相同的脚本。因此，我需要我需要做的改变......请让我知道需要做些什么。 –

我已添加脚本来添加和删除（切换）类的点击事件看看是否有帮助 – Champ

我所做的是低于....

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>

反黑组吧.....我知道这是不正确的方式，但我必须这样做......

来源

2012-10-04 14:39:47

见的demo

的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"); 
     } 

    });

来源

2012-10-04 12:50:05 Champ

演示链接不工作...请教你请重新检查并让我知道吗？我想你忘了保存。 –

@FahimParkar它的工作现在。你可以根据你的需要改变 – Champ

什么是链接是不是我期待...当你点击子菜单，颜色变成红色的子菜单，这是我不看..... .....点击子菜单，主菜单颜色应该改变.... –

添加活动类并将缺省值删除到所选菜单

回答

相关问题