クリックして要素にCSSクラスを追加

Question

cssクラスをクリックして要素に追加しようとしています。 しかし、私はそれをすることができませんでした。 このアクションの目標は、要素をクリックするとメニューの最初のレベルで別の色で表示されるということです。

たとえば、このリンクをクリックしてください。

http://www.templatemonster.com/demo/50935.html

この問題は、クリックした後にページを更新するの発生した可能性が！よく分かりません。

私はそれをどのように行うことができますか？

（私はASP.NETとUmbraco CMSを使用しました）

MyHelpers.cshtml：

@helper Navigation(int parentId, int depthNavigation = 3) 
{ 
IPublishedContent parent = Node.ContentCache.GetById(parentId); 
if (parent.Level <= (depthNavigation - 1) &&  parent.GetPropertyValue("UmbracoNaviHide").Equals(false) && parent.Children().Count() > 0) 
{ 
if (parent.Level > 1) 
{ 
     <ul style="visibility: hidden; display: none;" class="sub-menu"> 
      @foreach (IPublishedContent child in parent.Children()) 
      { 
       if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false)) 
       { 
        <li class="menu-item menu-item-type-post_type menu-item- object-page"> 
         <a href="@child.Url">@child.Name</a> 
         @Navigation(child.Id, depthNavigation) 
        </li> 
       } 
      } 
     </ul> 
    } 
    else 
    { 
     foreach (IPublishedContent child in parent.Children()) 
     { 
      if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false)) 
      { 
       <li id="menu-item-@child.Id" class="firstLevelOfMenu 
        menu-item 
        menu-item-type-post_type 
        menu-item-object-page"> 

        <a href="@child.Url">@child.Name</a> 
        @Navigation(child.Id, depthNavigation) 
       </li> 
      } 
     } 
    } 
} 
else 
{ 
    foreach (IPublishedContent child in parent.Children()) 
    { 
     if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false)) 
     { 
      <li> 
       <a href="@child.Url">@child.Name</a> 
       @Navigation(child.Id, depthNavigation) 
      </li> 
    } 
} 
} 
} 

Answer 1

DOMの変更は永続的ではありません。あなたが言うことを正確に起こします：this problem occurred because of refreshing the page after clicking。

この現象を起こすには、リンクをクリックしたときに変更を加える代わりにページの読み込みを変更する必要があります。新しいページが読み込まれたときに変更が失われるためです。

URLを読み、変更する必要があるリンクを「発見」し、適切な処置を行う必要があります。

• リンク1：http://exampledomain.com/about-us
• リンク2：http://exampledomain.com/buy-something
• リンク3：http://exampledomain.com/find-my/dog

は例えば、各1をこのように指して、あなたはhttp://exampledomain.com上の3つのリンクを持って言うことができます

このスクリプトを作成する必要があります。

$(document).ready(function() { 
    /* This will get the path part of the 
    * URL (The string after the domain) and 
    * split it into an array .*/ 
    var path = window.location.pathname.split("/"); 

    /* The we will remove the starting/if there's any */ 
    if (path.length > 1) { 
     path.splice(0, 1); 
    } 

    /* We check if there's actually a path */ 
    if (path.length > 0) { 
     return; 
    } 

    /* And then, we check for the different links */ 
    switch(path[0]) { 
     case "about-us": 
      $("#link1").addClass('yeah'); 
      break; 
     case "buy-something": 
      $("#link2").addClass('yeah'); 
      break; 
     case "find-my": 
      $("#link3").addClass('yeah'); 
      break; 
    } 
});