更改所选标签的颜色,jquery
问题描述:
我有一个标签(引导<ul>
)。我想通过jquery强调选项的颜色。
这里是我的html更改所选标签的颜色,jquery
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li id="aboutus">@Html.ActionLink("About Us", "aboutus","home")</li>
<li id="service">@Html.ActionLink("Services", "Services", "home")</li>
<li id="portfolio">@Html.ActionLink("Portfolio", "portfolio", "home")</li>
</ul>
我的问题是我怎么更改的项目,这是由用户选择的颜色吗?
答
问题是,每当您导航到不同的页面并且导航栏被刷新时,它将始终选择第一个<li>
作为活动。使用jQuery,您可以获取当前页面的url,并查看哪个链接将此地址作为href并将活动类添加到它。从下拉列表中的第一项中移除活动链接,并使用jQuery添加活动类。
标记
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li id="aboutus">@Html.ActionLink("About Us", "aboutus","home")</li>
<li id="service">@Html.ActionLink("Services", "Services", "home")</li>
<li id="portfolio">@Html.ActionLink("Portfolio", "portfolio", "home")</li>
</ul>
jQuery的
<script>
$(document).ready(function() {
var activeLink = location.pathname.substr(location.pathname.lastIndexOf('/'), location.pathname.length);
var parent = $('a[href$="' + activeLink + '"]').parent('li');
if (parent.closest('ul').hasClass('dropdown-menu')) {
parent.parents('.dropdown').addClass('active');
}
parent.parent('li').addClass('active');
});
</script>
如果导航栏有它内部的多个链接的下拉列表这个额外<ul>
检查使用。
用css代替 – depperm
但是如何用css做到这一点? – santubangalore
您正在使用MVC,因此您只需在您的'cshtml'文件中说出您正在查看的那个文件,因为您只需编辑该视图即可。 @depperm关于使用CSS的地方只是看看我的jsfiddle:https://jsfiddle.net/o5v6at31/。如果你不知道css,你可能想要去w3schools并看看。如果您使用引导,您将需要它 – Canvas