在垂直点导航中，颜色在活动点处不会改变

时间：2016-01-16 06:23:52

标签： javascript jquery html css

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

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

2 个答案:

答案 0 :(得分：0)

删除了类=＆＃39; vNav＆＃39;来自UL标签。

将活动链接的背景更改为红色，因为我无法将链接点放在黑色背景上方。

的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>

答案 1 :(得分：0)

最后，我可以设法让事情发挥作用。我的解决方案如下。 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 

<script>
$('a').click(function () {
        $('a').removeClass('is-selected');
        $(this).addClass('is-selected');
    });
</script>
相关问题
最新问题