我创建了一个导航栏菜单,并在选中时尝试突出显示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
答案 0 :(得分:0)
你需要一些脚本来激活它,你的小提琴不起作用,你还没有在那里包含js和jQuery,请看看你的代码的这个工作片段,你的数据目标也不会触发你的忘记其中'#"
,data-target="#bs-example-navbar-collapse-1"
使其有效。
$(".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;