要素のクラスをアクティブに変更するにはどうすればよいですか？

Question

サイドナビゲーションバー用のブートストラップテンプレートをEJSの一部として使用しています。このテンプレートは、それを使用するすべてのページに含まれています。はDashboard templateから取られました。 HTMLはどちらのリンク

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 
    <ul class="nav nav-pills flex-column"> 
    <li class="nav-item"> 
     <a class="nav-link active" href="/profile">Overview</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/accountdetails">Account Details</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/admin">Admin</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/transactions">Transactions</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="/contract">Contract</a> 
    </li> 
    </ul> 
</nav> 

はactiveクラスが背景に暗い青で特定のスタイルを持っています。私は今、異なるリンクにナビゲートするときにこれをプログラム的に変更したいと思っています。

私はちょうどそこに変更することができるので、彼らはすべて私がサイドバーコードをEJSの部分として含めているので、動作しませんでした。私もこの試みたanswerしかし、それは動作しませんでした（アクティブなスタイリングを点滅させるが、消える - おそらく、別のページにルーティングされているため？

プログラム的にHTML要素を変更することに関して多くの疑問がありますが、通常はdocument.getElementByIdを使用しています（それぞれIDを付けたり、すべてをチェックするなど）。これを行うのがより早く正しい方法がありますか？

Answer 1

回答者の中には、同じページにとどまっていると考えて、あなたの<a>タグのクラスを変更していると少し混乱している人もいます。しかし、これらのページへのクリックは新しいページに移動し、適切な<a>にはページが読み込まれるときにactiveクラスが必要です。

これは役立つかもしれない：jQueryを使って

<script> 
    var path = location.pathname; // ex: '/profile'; 
    var activeItem = document.querySelector("a[href='" + path + "']"); 
    activeItem.class += ' active'; 
</script> 

そしてもちろん、それはさらに簡単です：の

$(function() { 
    var path = location.pathname; 
    $("a[href='" + path + "']").addClass('active'); 
}) 

Answer 2

あなたは、次の操作を行うことができます：

• .activeクラスを追加するために、.nav-item上のクリックイベントを設定します。
• 他の兄弟要素から.activeクラスを削除します。

$('.nav-item').on('click', function() { 
 
    $(this).addClass('active').siblings('li').removeClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 
 
    <ul class="nav nav-pills flex-column"> 
 
    <li class="nav-item active"> 
 
     <a class="nav-link" href="#">Overview</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Account Details</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Admin</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Transactions</a> 
 
    </li> 
 
    <li class="nav-item"> 
 
     <a class="nav-link" href="#">Contract</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 3

これはあなたを助けるためのコードです。

<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar"> 
 
     <ul class="nav nav-pills flex-column"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#">Overview</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Account Details</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Admin</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Transactions</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#">Contract</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 

 

 
    <script type="text/javascript"> 
 
     $(function() { 
 
      $(".nav-item").click(function() { 
 
       $(".nav-item").each(function() { 
 
        $(this).find("a").removeClass("active"); 
 
       }); 
 
       $(this).find("a").addClass("active"); 
 
      }); 
 
     }); 
 
    </script>

Answer 4

あなたEJSを使用して、あなたはおそらく次

<a class="nav-link<% if (page_name === 'profile') { %> active<% } %>" href="/profile">Overview</a> 

ような何かを行うことができればこれはテストされていませんが、あなたは正しい道に軌道に乗る必要があります。 EJSの構文を使用してif文を実行して、正しいページにいるかどうかを確認し、activeという単語を追加してください。