2016-08-17 20 views
1

を使用して、アクティブどのように私はasp.net Webフォームで現在のメニュー項目をアクティブにしないマスターページどのように現在のメニューにjqueryのか、JavaScript

つまり、私が選択し、そのページに行くならば、ドロップダウンメニューをアクティブに(<li class="active treeview">)が必要でasp .net c#で動的に。

jqueryまたはjavascriptをC#で使いたいです。

すべての左側のドロップダウンリストは、masterpageで利用できます。

 <li class="treeview" id="settingId" runat="server"> 
          <a href="#"> 
           <i class="fa fa-files-o"></i> 
           <span>SETTING</span> 

          </a> 
          <ul class="treeview-menu"> 
           <li><a href=""><i class="fa fa-circle-o"></i>CATEGORY MANAGEMENT</a></li> 
           <li><a href=""><i class="fa fa-circle-o"></i>ADD CATEGORY</a></li> 
           <li><a href=""><i class="fa fa-circle-o"></i>EMAIL MANAGEMENT</a></li> 
           <li><a href=""><i class="fa fa-circle-o"></i>CHANGE PASSWORD</a></li> 
          </ul> 
         </li> 
<li class="treeview" id="portfolioId" runat="server"> 
         <a href="#"> 
          <i class="fa fa-pie-chart"></i> 
          <span>PORTFOLIO</span> 
          <i class="fa fa-angle-left pull-right"></i> 
         </a> 
         <ul class="treeview-menu"> 
          <li><a href=""><i class="fa fa-circle-o"></i>PROJECT MANAGEMENT</a></li> 
          <li><a href=""><i class="fa fa-circle-o"></i>ADD PROJECT</a></li> 
          <li><a href=""><i class="fa fa-circle-o"></i>PRODUCT MANAGEMENT</a></li> 
          <li><a href=""><i class="fa fa-circle-o"></i>ADD PRODUCT</a></li> 
         </ul> 
        </li> 

答えて

1

あなたは現在のタブ(親li)のIDを持つマスターページに隠しフィールドを置くことができます。次に、コンテンツページにその非表示フィールドの値を設定します。

ハイライトするタブを決定するには、非表示フィールドの値を使用します。このコードでは、ulの親がid="MasterMenu"であり、でないことがであり、runat="server"であることを前提としています。また、隠しフィールドはid="CurrentTab"です。

function highlightTab() { 
    var currentTab; 

    //Get the id of the current tab from the hidden field 
    currentTab = $('#CurrentTab').val(); 

    if (currentTab !== null) { 
     //Remove the active-treeview class from all top level li elements 
     $('#MasterMenu').children('li').removeClass('active-treeview'); 

     //Set the active-treeview class to the current tab 
     $('#' + currentTab).addClass('active-treeview'); 
    } 
} 

EDIT:
ここでは、あなたのマスターページに置くの隠しフィールドの例です。私はrunat="server"属性を追加して、コードの背後で利用できるようにしています。コントロールがrunat="server"の場合、.NETはページのレンダリング時にIDの名前を変更します。 JavaScriptの非表示フィールドに簡単にアクセスできるようにこの動作を停止するには、ClientIDMode="static"属性を追加します。

<asp:HiddenField id="CurrentTab" value="" runat="server" ClientIDMode="static" /> 

コンテンツページのページロードイベントでは、その非表示フィールドの値を、そのページでハイライト表示するタブのIDに設定します。各ページには

HiddenField currentTab; 
currentTab = (HiddenField)this.Master.FindControl("CurrentTab"); 
currentTab.Value = "settingId"; 
+0

leftsidebar_settingIdを想定)現在のIDを変更する必要があります。次に、コンテンツページにその非表示フィールドの値を設定します。 どのようにして私にいくつかの例を教えてもらえますか? –

+0

私は答えを更新してあなたに例を与えました –

+0

動的にsetIdを取得する方法?currentTab.Value = "settingId"; –

-1

あなたは現在のタブ(親李)のIDを持つマスターページに隠しフィールドを置くことができる

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       debugger; 
       //$('#leftsidebar_portfolioId').addClass('treeview'); 
       $('#leftsidebar_settingId').addClass('treeview active'); 
      }); 

     </script> 
関連する問題