How to add active class on a single page site

How to add active class on a single page site
0.0 0

#1

Hi,

codepen - https://codepen.io/nightcoder21/pen/xjvWaj

my question is pretty simple,when i click on my nav bar links they work fine but i want them to underline when active.

e.g i click on ‘contact’ and it takes me to the relevant section but the contact text should be underlined with pink.

I know how to do this with a multi page setup but not with a single pay layout.

any help would be appreciated

Thanks


#2

In codepen->settings->js add jquery and then in js panel add:

$(".nav-item").on("click", function(e){
  $("li.nav-item").removeClass("active");
  $(this).addClass("active");
});

#3

thanks that worked on the code pen link:grinning:…sorry its seems like a silly question but i’m a beginner, how would i implement this on my real site (Im using pure HTML and CSS),im using bootstrap 4…can i just add this in my script section?
thanks


#4

If you are loading jquery also on your real site you can use the code above.


#5
  <script>
  $('.carousel').carousel({
  interval: 2000;
  }),

  $(".nav-item").on("click", function(e){
  $("li.nav-item").removeClass("active");
  $(this).addClass("active");
   });
  </script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
    
  </script>
</body>

#6

the above dosen’t work, am i doing something wrong?
thanks


#7

ofc it doesn’t work if you load js libs after your js code.


#8

sorry i have no idea…do i put this in the head tag?


#9

Just move this:

  <script>
  $('.carousel').carousel({
  interval: 2000;
  }),

  $(".nav-item").on("click", function(e){
  $("li.nav-item").removeClass("active");
  $(this).addClass("active");
   });
  </script>

after this:


 <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
    
  </script>

#10
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
  </script>
</body>

this still dosent seem to work…am i missing something?

thanks


#11

yes. if you move your js code after you load the js libs it will work. please see my above response.


#12

i did try that and it doesnt seem to work…when i click on a navbar link it doesnt high light


#13

Can you share the link to your code?


#14

sure…https://codepen.io/nightcoder21/pen/aGeGJP

if i add it to the JS tab it works just fine…however i’m using plain old html and css and want it to work on my live site,thanks


#15

please just decide. are you going to use:

<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <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.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
  </script>

or are you planing to do it vanilla javascript?


#16

im a beginer so whatever is simple to implement i guess…i only know html and css at this point,thanks.

just something simple that works i guess