選択したグリフコンイメージとテキストをハイライトします。

ナビゲーションバーメニューを作成し、グリフコンイメージとテキストを選択して強調表示しています。現在、メニューの上にマウスを置いたときの作業。私はそれのためにあなたはそれをアクティブにするために、いくつかのスクリプトが必要選択したグリフコンイメージとテキストをハイライトします。

ビュー

<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> 
    <meta http-equiv="X-UA-Compatible" content="IE=9" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <title>@ViewBag.Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,user-scalable=no"> 

    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/kendo/css") 
    @Styles.Render("~/Content/custom/css") 


    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/bundles/kendo") 

</head> 
<body> 

    <header> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 

       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <div id="breadcrumbs"> 
         <a href="#"><img src="~/Images/Computacenter.png" /> </a> 
         <span>MCR</span> 
        </div> 

       </div> 

       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

         <ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav"> 
          @*<li><a href="@Url.Action("NewRequest_Read", "Request")"><span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span><p>Home</p></a></li>*@ 
          <li><a href="@Url.Action("Index", "Request")"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
          <li><a href="@Url.Action("Index", "Activity")"><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
          <li><a href="@Url.Action("Index", "Message")"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
          @*<li class="hideli"><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></a></li>*@ 
          <li><a href="@Url.Action("Team", "Admin")"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></a></li> 
          <li><a href="@Url.Action("Index", "Message")"><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
          <li> Welcome <span class="WelcomeUserName">Ranjit Menon </span></li> 
         </ul> 
</div> 
      </div> 
     </nav> 

    </header> 

    <div id="body"> 
      @RenderBody() 
    </div> 

    @Scripts.Render("~/bundles/modernizr") 

    @RenderSection("scripts", required: false) 

</body> 
</html>

jsfiddle

https://jsfiddle.net/utmqnkuf/16/

出典

2017-05-21 Tom

を作成したコードとjsfiddleを共有しています、あなたのフィドルは、あなたに動作していませんそこにjsとjQueryは含まれていません。あなたのコードでこの作業のスニペットを見てください。また、'#"、data-target="#bs-example-navbar-collapse-1"が機能するように忘れたデータターゲットもあります。

$(".nav a").on("click", function(){ 
 
    $(".nav").find(".active").removeClass("active"); 
 
    $(this).parent().addClass("active"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header> 
 
     <nav class="navbar navbar-default"> 
 
      <div class="container-fluid"> 
 
        
 
       <div class="navbar-header"> 
 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
         <span class="sr-only">Toggle navigation</span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
         <span class="icon-bar"></span> 
 
        </button> 
 
        <div id="breadcrumbs"> 
 
         <a href="#"><img src="~/Images/Computacenter.png" /> </a> 
 
         <span>MCR</span> 
 
        </div> 
 

 
       </div> 
 

 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
         
 
         <ul class="nav navbar-nav navbar-right text-center" id="mcrrequestnav"> 
 
          
 
          <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
 
          <li><a href="#"><span class="glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
 
          <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
 
          
 
          <li><a href="#"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></a></li> 
 
          <li><a href="#"><span class="glyphicon glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
 
          <li> Welcome <span class="WelcomeUserName">Jack Murray </span></li> 
 
         </ul> 
 
</div> 
 
      </div> 
 
     </nav> 
 

 
    </header>

出典

2017-05-21 12:35:31

私はjqueryのを使用してアクティブにすることができました。私が見ているのは、テキストとジャイキンの画像だけを強調表示しています – Tom

jsfiddleへのリンクがなぜ機能するのかわかりません – Tom

選択したグリフコンイメージとテキストをハイライトします。

答えて

関連する問題