navbarをアクティブにしようとしています - 自分のすべてのファイルに自分のnav_bar.jspファイルを含めました

Question

私はnav_bar.jspというファイルを持っています。このファイルでは、私はこれがあります。

<%@ include file="nav_bar.jsp" %> <%-- Bringing in nav bar --%> 

：とにかく

<ul class="nav navbar-nav"> 
       <!-- navbar links --> 
       <li class="active"><a href="${pageContext.request.contextPath}/index/">Home</a></li> 
       <li><a href="${pageContext.request.contextPath}/myinfo/">My Information</a></li> 
       <li><a href="${pageContext.request.contextPath}/reimbursements/">Reimbursements</a></li> 
       <li><a href="${pageContext.request.contextPath}/employees/">Employees</a></li> 
      </ul> 

（私のURLは、パスをチェックして正規表現を持っている）

を、すべての私のファイルは、以下でこのファイルを含めます

navbarが完璧に表示されます。しかし、私は、開いているタブに応じて "アクティブ"クラスを変更しようとしています。私はJSでそれをやろうとしていましたが、それでも動作しません。 headタグ内の最後のタグとして

<script type="text/javascript" src="${pageContext.request.contextPath}/JS/default.js"></script> 

を私はnav_bar.jspに私のJSを取得し、また、これに他のすべてのページだ：私はこの

にDefault.js

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

注意を試してみました

bodyタグの末尾にJSを追加しなければならないと読んだのですか？それが本当かどうかはわかりませんでした。私は試しましたが、それでも動作しませんでした。

Answer 1

新しいタブをクリックしているときにナビゲートしているので、新しいページがロードされ、DOMリフレッシュされます。

アクティブなクラスを設定する方法の1つは、リクエストURLに基​​づいています。あなたはHTMLタグかJavaScriptのどちらかを使ってそれを行うことができます。 HTMLタグのような何かをするために、以下の：（あなたは（あなたが）、各リンクに対して、必要な条件を調整し、すべてのタブのためにそれを行う必要があります）

<li class="${pageContext.request.requestURI.endsWith('/index/') ? 'active' : ''}"> 
    <a href="${pageContext.request.contextPath}/index/">Home</a> 
</li> 

注：私はちょうどあなたの最初のリンクのための条件を仮定しました。より幅広い要求をカバーするよう調整することができます。