Can';无法基于URL/jQuery使用活动导航
我有一个简单的菜单,但我似乎无法让主动导航工作。我认为这可能与基于URL的代码有关,而我在链接中使用完整的URL(即) HTML: JS:Can';无法基于URL/jQuery使用活动导航,jquery,html,css,Jquery,Html,Css,我有一个简单的菜单,但我似乎无法让主动导航工作。我认为这可能与基于URL的代码有关,而我在链接中使用完整的URL(即) HTML: JS: 你就快到了,只是几个小问题: 您的JS似乎暗示您希望使用活动的CSS类来设置的样式。但是,CSS意味着您希望在中设置的样式 您正在将URL与元素可能具有的类名进行匹配。但是,在HTML中,没有一个元素分配了类 简而言之:为每个提供适当的类名(例如,“home”)并更新CSS,以便得到样式化(或相应地更新JS) <ul id="naviga">
你就快到了,只是几个小问题:
活动的CSS类来设置
的样式。但是,CSS意味着您希望在
中设置
的样式
元素可能具有的类名进行匹配。但是,在HTML中,没有一个
元素分配了类
提供适当的类名(例如,“home”)并更新CSS,以便
得到样式化(或相应地更新JS)
<ul id="naviga">
<li><a href="http://helloarchie.blue/">Home</a>
</li>
<li><a href="http://helloarchie.blue/category/motherhood/">Motherhood</a>
</li>
<li><a href="http://helloarchie.blue/category/fashion-friday/">Fashion</a>
</li>
<li><a href="http://helloarchie.blue/category/reviews/">Reviews</a>
</li>
<li><a href="http://helloarchie.blue/category/blogging-tips/">Blogging</a>
</li>
<li><a href="http://helloarchie.blue/category/lifestyle/">Lifestyle</a>
</li>
<li><a href="http://helloarchie.blue/about/">About</a>
</li>
<li><a href="http://helloarchie.blue/contact-me/">Contact</a>
</li>
</ul>
#naviga li {
display: inline;
padding: 0 2%;
text-align: center;
font-family:"brandon-grotesque", "HelveticaNeue", "Helvetica Neue", Helvetica, serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.75em;
}
#naviga li a {
position: relative;
}
#naviga li a:hover {
color: #585858;
font-weight: bold;
}
#naviga li a::before {
content:'';
position: absolute;
background: #f6a889;
height: 2px;
margin-top: -17px;
margin-left: -2px;
top: 0;
left: 0;
width: 0%;
-webkit-transition: all 0.65s ease;
-moz-transition: all 0.65s ease;
-o-transition: all 0.65s ease;
transition: all 0.65s ease;
}
#naviga li a:hover::before {
width: 100%;
}
#naviga li a .active {
content:'';
position: absolute;
background: #f6a889;
height: 2px;
margin-top: -16px;
margin-left: -2px;
top: 0;
left: 0;
width: 100%;
}
$(document).ready(function () {
url = window.location.pathname;
url = url.substring(1);
if (url == '') {
url = 'home';
}
$('#naviga li.active').removeClass('active');
$('#naviga li').each(function () {
if ($(this).hasClass(url)) {
$(this).addClass('active');
}
});
});