javascript - 垂直点导航中事件点的颜色不会改变

Question

我实现了垂直点导航。(1)问题是事件点的颜色没有变成白色。如图 所示，只有第一个保持白色，尽管它未处于事件状态。 .(2)如何降低点位？我尝试了 position、right 和 top 属性，但没有改变。

.vNav {
    position:absolute;
    right:7px;
    top:200px;
    width: 50px;
    z-index: 9999;
    list-style-type: none;
}

我的 HTML 是

<form  class="summarybackground" name="summary"  id="summary" style="height:500px;width:920px;overflow-y:hidden;"  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" class="par">    
        <h1>Landed</h1>

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

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

      </div>

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

      </div> 

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

      </div>
   </div>   



</div>

</form>

Javascript 是

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

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

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

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

    $(document).scroll(function () {
        var position = $('form').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');
        $(form).addClass('active');
    });
});
</script>

CSS 是

.summarybackground {background-color:#000000;}

.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 850px;
height: 500px;
margin-bottom: 150%;
}


.vNav {
    position:absolute;
    right:7px;
    top:200px;
    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: #ffffff;
    text-decoration: none;
}

.label {
    position:absolute;
    right: 5%;
    top: 40%;
    width: 100%;
    text-align: right;
    font-size: 2em;
    color: #ffffff;
    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;}

Answer 1

从 UL 标签中删除了 class='vNav'。

将事件链接的背景更改为红色，因为我无法将链接点放在黑色背景之上。

CSS:

        .vNav a.active {
        border-radius: 50%;
        background-color: #ff0000;
        text-decoration: none;
    }

Javascript:

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

        });
        </script>