文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4导航条活动类不工作

问引导4导航条活动类不工作
EN

Stack Overflow用户

提问于 2019-02-07 04:08:48

回答 3查看 3.5K关注 0票数 0

在一个网站中，我试图让这个特定的导航栏活动类工作。当我点击当前页面时，我希望链接变成蓝色。由于我是一个初学者，任何帮助都将是非常感谢的。提前谢谢。

这是肚脐：

<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;
}

bootstrap-4

javascript

html

css

django

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-02-07 04:23:58

下面是工作演示：

$(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');
});

票数 2

Stack Overflow用户

发布于 2019-02-07 04:21:41

在JQuery中添加了名为active的类，但是在css中添加了类activated。将其更改为active

.nav > .p-2.active { color:blue; }

票数 0

Stack Overflow用户

发布于 2019-02-07 04:21:43

首先，您正在错误地选择selector，添加以下内容

$('.nav .p-2.text-muted').click(function(){
  $('.nav .p-2.text-muted').removeClass('active');
  $(this).addClass('active');
})

还有css

.nav  > .p-2.active  {
color:blue;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54566154

复制

相似问题

问引导4导航条活动类不工作
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4导航条活动类不工作EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4导航条活动类不工作
EN