垂直点导航

Question

我按照here的想法实施了垂直点导航。 但无法弄清楚原因 （1）当我悬停点时，它应该显示标签。但现在它没有。 （2）活动点应具有rgb（207,219,218）颜色。但它没有。

我的代码如下所示。

HTML

<form  class="summarybackground" name="summary"  id="summary" style="height:550px;width:920px;overflow-y:auto;"  method="post">

<div class="myBox" id="section"> 

    <div class="vNav">
      <ul class="vNav">
          <li> <a href="#section1"><div class="label">Landed</div></a>

          </li>
          <li> <a href="#section2"><div class="label">Apartment</div></a>

          </li>
          <li> <a href="#section3"><div class="label"> Condominium </div></a>

          </li>
          <li> <a href="#section4"><div class="label"> Commercial </div></a>

          </li>
          <li> <a href="#section5"><div class="label"> Farm </div></a>

          </li>
      </ul>


   </div>

   <div class="col-sm-9">



      <div id="section1">    
        <h1>Landed</h1>

      </div>
      <div id="section2"> 
        <h1>Apartment</h1>

      </div>
      <div id="section3">         
        <h1>Condominium</h1>

      </div>

      <div id="section4">         
        <h1>Commercial</h1>

      </div> 

      <div id="section5">         
        <h1>Farm</h1>

      </div>


   </div>



</form>

的Javascript

$(document).ready(function ($) {
    var parPosition = [];
    $('.par').each(function () {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function () {
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
        return false;
    });

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });

    $('.vNav a').hover(function () {
        $(this).find('.label').show();
    }, function () {
        $(this).find('.label').hide();
    });

    $(document).scroll(function () {
        var position = $(document).scrollTop(),
            index;
        for (var i = 0; i < parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
        $('.vNav ul li a').removeClass('active');
        $('.vNav ul li a:eq(' + index + ')').addClass('active');
    }).scroll();

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });
});

css

.vNav {
    position:absolute;
    right:5%;
    top:40%;
    width: 50px;
    z-index: 9999;
    list-style-type: none;
}
.vNav ul {
    position: relative;
    padding: 3px;
    padding-left: 35%;
}
.vNav ul li {
    position: relative;
    padding-bottom: 20px;
    padding-left: 35%;
    color: rgb(113, 135, 133);
}
.vNav a {
    display: block;
    width: 13px;
    height: 13px;
    text-indent: -9999px;
    border-radius: 50%;
    border: 2px solid;
    border-color: rgb(113, 135, 133);
    text-decoration: none;
}
.vNav a:hover {
    border-radius: 50%;
    background-color: rgb(113, 135, 133);
    text-decoration: none;
}
.vNav a.active {
    border-radius: 50%;
    background-color: rgb(207, 219, 218);
    text-decoration: none;
}

.label {
    position:absolute;
    right: 5%;
    top: 40%;
    width: 100%;
    text-align: right;
    font-size: 1em;
    color: rgb(113, 135, 133);
    display: none;
}


  div.col-sm-9 div {
      height: 500px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section4 {color: #fff; background-color: #00bcd4;}
  #section5 {color: #fff; background-color: #009688;}

编辑1：

<script  src="mainpage.js"></script>
<script 
$(document).ready(function ($) {
    var parPosition = [];
    $('.par').each(function () {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function () {
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
        return false;
    });

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });

    $('.vNav a').hover(function () {
        $(this).find('.label').show();
    }, function () {
        $(this).find('.label').hide();
    });

    $(document).scroll(function () {
        var position = $(document).scrollTop(),
            index;
        for (var i = 0; i < parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
        $('.vNav ul li a').removeClass('active');
        $('.vNav ul li a:eq(' + index + ')').addClass('active');
    }).scroll();

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>

编辑2：

<script 
$(document).ready(function ($) {
    var parPosition = [];
    $('.par').each(function () {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function () {
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
        return false;
    });

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });

    $('.vNav a').hover(function () {
        $(this).find('.label').show();
    }, function () {
        $(this).find('.label').hide();
    });

    $(document).scroll(function () {
        var position = $(document).scrollTop(),
            index;
        for (var i = 0; i < parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
        $('.vNav ul li a').removeClass('active');
        $('.vNav ul li a:eq(' + index + ')').addClass('active');
    }).scroll();

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(this).addClass('active');
    });
});
</script>       
<script  src="mainpage.js"></script>

mainpage.js是

//This is for Search Menu
jQuery(document).ready(function() {
        jQuery('#maintopmenu .tab-links a').on('click', function(e)  {
            var currentAttrValue = jQuery(this).attr('href');
            jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
            e.preventDefault();
        });
});
$(function() {
        $( "#maintopmenu" ).tabs();
});



function searchButtonAction() {
        var min_price= $('#min_price').val();
        if ($.trim(min_price) == '' ) {
            $('#price-error').css('display', 'block');
            $('#price-error').html('Please include minimum price');
            return;

        }else if(!min_price.match(/^\d+$/)){
             $('#price-error').css('display', 'block');
             $('#price-error').html('Price can include only numerical digits');
             return;
        }else{
            $('#price-error').html('');
        }  

        var max_price= $('#max_price').val();
        if ($.trim(max_price) == '' ) {
            $('#price-error').css('display', 'block');
            $('#price-error').html('Please include maximum price');
            return;
        }else if(!max_price.match(/^\d+$/)){
             $('#price-error').css('display', 'block');
             $('#price-error').html('Price can include only numerical digits');
             return;
        }else{
            $('#price-error').html('');
        }  
}