在垂直点导航中，活动点处的颜色不变 [英] Color doesn't change at active dot in vertical dot navigation

问题描述

我实现了垂直点导航。
（1）问题是活动点的颜色不会变成白色。只有第一个保持为白色，虽然它不活动，如图所示。
（2）如何降低点位置？我尝试了position，right和top属性，但没有改变。

I implemented vertical dot navigation. (1)The problem is the active dot's color is not changed to white. Just the first one is kept with white color though it is not active as shown in figure . (2)How can I bring down the dot positions? I tried at position, right and top properties, but not changed.

.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是

Javascript is

<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;}

推荐答案

管理使事情工作。我的解决方案如下。
HTML

Finally I can manage to make the things work. My solution is as follow. HTML

<nav id="cd-vertical-nav">
        <ul>
            <li>
                <a data-number="1" href="#section1" class="is-selected">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Landed</span>
                </a>
            </li>
            <li>
                <a data-number="2" href="#section2" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Apartment</span>
                </a>
            </li>
            <li>
                <a data-number="3" href="#section3" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Condominium</span>
                </a>
            </li>
            <li>
                <a data-number="4" href="#section4" class="">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Commercial</span>
                </a>
            </li>
            <li>
                <a data-number="5" href="#section5">
                    <span class="cd-dot"></span>
                    <span class="cd-label">Farm</span>
                </a>
            </li>

        </ul>
</nav>
<div class="col-sm-9">
      <div id="section1">    
        <h1 class="header">Landed</h1>

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

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

      </div>

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

      </div> 

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

      </div>
   </div>

CSS

#cd-vertical-nav {
  position: absolute;
  right: 4%;
  top: 65%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
#cd-vertical-nav li {
  text-align: right;
  list-style:none;
}
#cd-vertical-nav a {
  display: inline-block;
  /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-vertical-nav a:after {
  content: "";
  display: table;
  clear: both;
}
#cd-vertical-nav a span {
  display: inline-block;
  float: right;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -o-transform: scale(0.6);
  transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
  opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
  background-color: white;
}
#cd-vertical-nav .cd-dot {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
  position: relative;
  margin-right: 10px;
  padding: .4em .5em;
  color: white;
  font-size: 14px;
  font-size: 0.875rem;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
  -moz-transition: -moz-transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}


h1.header{
    color: green;
    text-align: center;
    font-size: 1em;
}
div.col-sm-9 div {
      height: 500px;
      font-size: 18px;

}

#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;}

JAVASCRIPT

JAVASCRIPT

<script>
$('a').click(function () {
        $('a').removeClass('is-selected');
        $(this).addClass('is-selected');
    });
</script>

这篇关于在垂直点导航中，活动点处的颜色不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！