简体   繁体   中英

Why is my bootstrap navbar not showing the active button?

导航栏是什么样的

I'm trying to use bootstrap for the first time and I understand I need to link the js and stylesheets in the head, this is in a master page btw. I did that and It's supposed to set the active class to whichever page is clicked on. I'm not sure what I'm doing wrong, sorry if this has a simple solution I'm not aware of.

<head runat="server">
<title></title>
<link href="Style/css/bootstrap.css" rel="stylesheet" />
<script src="Style/js/bootstrap.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

https://pastebin.com/nBKYaRzh

this code wouldn't format properly here so I had to post it on pastebin.

<nav class="navbar-default menu">
      <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand">Shittalk.tf</a>
         </div>
       <ul class="nav navbar-nav">
         <li class="active" ><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Donate</a></li>
       </ul>
      </div>
</nav>

<script type="text/javascript">
  $(document).ready(function(){
   $('.menu li').click(function(e) {
   console.log("hello")
   var $this = $(this);

   $("li").removeClass("active")
   $this.addClass('active');
  e.preventDefault();
  });
 });
  </script>

Don't forget to add Bootstrap and jQuery for this. working example

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM