<分区>
<分区>
在一个网站中，我试图让这个特定的导航栏事件类起作用。当我点击当前页面时，我希望链接变成蓝色。由于我是初学者，任何帮助将不胜感激。提前致谢。
这是导航栏:
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="active p-2 text-muted" href="#"><b> Business</b> </a>
<a class="p-2 text-muted" href="#"><b> Design </b></a>
<a class="p-2 text-muted" href="#"><b>Travel </b></a>
<a class="p-2 text-muted" href="#"><b> Opinion </b></a>
</nav>
</div>
这是javascript代码:
$('.nav .p-2 .text-muted').click(function(){
$('.nav .p-2 .text-muted').removeClass('active');
$(this).addClass('active');
})
我还使用 CSS 将当前导航栏页面链接变为蓝色:
.nav > .p-2.activate {
color:blue;
}
最佳答案
这是工作演示:
$(document).ready(function(){
$('nav a').click(function(){
$('nav a').removeClass('active');
$(this).addClass('active');
let link=$(this).attr('href');
window.location.href=link;
});
});.nav >a.active>b{
color:blue;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="nav-scroller py-1 mb-2">
<nav class="nav d-flex justify-content-between">
<a class="active p-2 text-muted" href="https://fonts.google.com"><b> Business</b> </a>
<a class="p-2 text-muted" href="https://facebook.com"><b> Design </b></a>
<a class="p-2 text-muted" href="google.com"><b>Travel </b></a>
<a class="p-2 text-muted" href="#"><b> Opinion </b></a>
</nav>
</div>
</body>
</html>你需要从服务器端发送 section="yourpagename" 到前端，
现在您可以通过两种方式显示事件链接:
1) 第一个是做三元条件并在标签中添加类
像这样:
<a class="p-2 text-muted <% section=="Business"?'active':'' %>" href="#"><b> Business</b> </a>
2) 第二种方式是使用 jQuery 添加事件类
<a id="Business" class="p-2 text-muted" href="#"><b> Business</b> </a>
$(document).ready(function(){
var section= "Business" . <--send value from server side same as link id
$('#'+section).addClass('active');
});
关于javascript - Bootstrap 4 导航栏事件类不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54566154/
相关文章：
javascript - 基于 Controller 返回值的 Ng 类
javascript - ASP.NET/VS2010 在项目中查找未使用的文件
javascript - $ ("123").ready (fn(){}) 无论如何都会触发
html - FireFox 中表格周围的 <div> 边框问题
javascript - 如何在javascript中动态添加表格
html - 当单元格不透明度低于 1 时，单元格边框采用单元格背景颜色，Chrome 工作正常
css - 如何在 Windows 上的 Safari 中进行测试？