Question

我创建了一个导航栏菜单，并在选中时尝试突出显示glyphicon图像和文本。当我将鼠标悬停在菜单上时，它正在工作。我正在分享我为它创建的代码和jsfiddle

视图

<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/

Answer 1

你需要一些脚本来激活它，你的小提琴不起作用，你还没有在那里包含js和jQuery，请看看你的代码的这个工作片段，你的数据目标也不会触发你的忘记其中'#"，data-target="#bs-example-navbar-collapse-1"使其有效。

＆＃13;

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

＆＃13;

<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>

＆＃13;

突出显示导航栏中选定的glyphicon图像和文本

1 个答案: