i'm creating parallax webpage

i want to make the clicked

<li class="active">

active and make the others unactive. and i just don't know how to do it. i'm using twitter bootstrap for the navigation

<ul class="nav navbar-nav navbar-navi">
   <li class="active"><a href="#home" class="scroll">Home</a></li>
   <li><a href="#about" class="scroll">About</a></li>
   <li><a href="#" class="scroll">Works</a></li>
   <li><a href="#" class="scroll">Services</a></li>
   <li><a href="#" class="scroll">Stats</a></li>
   <li><a href="#" class="scroll">Team</a></li>
   <li><a href="#" class="scroll">Contact</a></li>
</ul>

CSS

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
 {
   color: #B38441;
   background-color:transparent;
 }

Js i'm using for the smooth scroll

 $(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1500,'swing');
 });

i'm creating parallax webpage

i want to make the clicked

<li class="active">

active and make the others unactive. and i just don't know how to do it. i'm using twitter bootstrap for the navigation

<ul class="nav navbar-nav navbar-navi">
   <li class="active"><a href="#home" class="scroll">Home</a></li>
   <li><a href="#about" class="scroll">About</a></li>
   <li><a href="#" class="scroll">Works</a></li>
   <li><a href="#" class="scroll">Services</a></li>
   <li><a href="#" class="scroll">Stats</a></li>
   <li><a href="#" class="scroll">Team</a></li>
   <li><a href="#" class="scroll">Contact</a></li>
</ul>

CSS

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
 {
   color: #B38441;
   background-color:transparent;
 }

Js i'm using for the smooth scroll

 $(".scroll").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1500,'swing');
 });

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Mar 21, 2015 at 12:00 DanielDaniel 1,46666 gold badges2121 silver badges3737 bronze badges 1

• Try this jsfiddle/ukh9dp5y – Akshay Commented Mar 21, 2015 at 12:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

$('.nav').click(function(){
    $('.nav').removeClass('active');
    $(this).addClass('active');
});

Add the following two lines in your click function

$(".scroll").parent().toggleClass("active", false);
$(this).parent().toggleClass("active", true);

The first line removes the class active from all li elements. The second adds active back to the clicked a element's parent = li.

Add following script your page
<script type="text/javascript">
    $('document').ready(function (){
        $('.liactive').click(function (){
            $('.liactive').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

You can add class and id in every li tag, like following.

    <ul class="nav navbar-nav navbar-navi">
    <li class="active liactive"><a href="#home" class="scroll">Home</a></li>
    <li class="liactive" id="about"><a href="#about" class="scroll">About</a></li>
    <li class="liactive" id="work"><a href="#" class="scroll">Works</a></li>
    <li class="liactive" id="services"><a href="#" class="scroll">Services</a></li>
    <li class="liactive" id="stats"><a href="#" class="scroll">Stats</a></li>
    <li class="liactive" id="team"><a href="#" class="scroll">Team</a></li>
    <li class="liactive" id="contact"><a href="#" class="scroll">Contact</a></li>
</ul>    

this was the solution ...

HTML

<body data-spy="scroll" data-target="#navbar-example">
<div id="navbar-example">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"href="#home">DANIEL <span class="brand">THE DEVELOPER</span></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-navi">
          <li class="active"><a href="#home" class="scroll">Home</a></li>
          <li><a href="#about" class="scroll">About</a></li>
          <li><a href="#" class="scroll">Works</a></li>
          <li><a href="#" class="scroll">Services</a></li>
          <li><a href="#" class="scroll">Stats</a></li>
          <li><a href="#" class="scroll">Team</a></li>
          <li><a href="#" class="scroll">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

CSS

 body{
  position: relative;
 }

JS

 $('body').scrollspy({ target: '#navbar-example' })
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
 })