尝试将'active'类添加到与当前页面相对应的链接中,该链接位于menu.html中存储的菜单上,并通过jQuery将其拉到index.html。
我已经设法用JQuery调用了menu.html文件,并将菜单插入index.html。CSS的造型都很完美。但是,由于我现在不是单独添加'active'类到每个菜单项,所以我需要一个方法来实现这一点。在index.html中所有活动类都在一个屋檐下时,我已经设法向菜单添加了一个活动类,但现在不是了,我已经将它移到了它自己的单独文件中。我已经得到的要点是,要么有工作的链接,或有‘活动’添加,如下所示。
菜单.html:
null
$(document).ready(function() {
$(function() {
$('.side a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
<a href="/intro.html">Intro</a>
<a href="/contact.html">Contact</a>
<a href="/about.html">About</a>
</div>
null
我希望上面显示我的菜单,显示活动链接,然后链接带用户到每一个不同的页面。菜单是show,它确实显示了活动链接,但链接现在不工作了。
您可以声明一个url变量以查看哪个是当前页面,然后将活动类添加到其中:
<script>
// This line will give you the active page without parameters
var url = window.location.href.split('/')[window.location.href.split('/').length-1].split('?')[0];
$('a[href$="'+url+'"]').addClass('active');
</script>