修复了带有动态更改菜单按钮的垂直导航菜单答案

【问题标题】：Fixed vertical navigation menu with dynamically changing menu buttons修复了带有动态更改菜单按钮的垂直导航菜单
【发布时间】：2015-05-07 06:03:17
【问题描述】：

我为我的网站创建了一个主题，在网页的右侧有一个固定的垂直导航菜单，以帮助用户滚动到网站的不同部分。现在，这些导航菜单按钮可以帮助用户移动到页面的不同部分，但是当我们单击一个部分的点时（或）如果我们通过滚动遍历到一个部分，菜单点的颜色不会改变上/下。在下面的代码中，如何使点的颜色“动态”改变？ :-

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
background-color:#3E3947;
} 
#cd-vertical-nav {
 position: fixed;
 right: 40px;
 top: 50%;
 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 {
  position: relative;
  top: 8px;
  height: 12px;
  width: 12px;
  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%;
    }


/*********************************RIGHT SIDE    *************************************/

    </style>
</head>
<body>
    <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">Intro</span>
            </a>
        </li>
        <li>
            <a data-number="2" href="#section2" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">About</span>
            </a>
        </li>
        <li>
            <a data-number="3" href="#section3" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Features</span>
            </a>
        </li>
        <li>
            <a data-number="4" href="#section4" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Portfolio</span>
            </a>
        </li>
        <li>
            <a data-number="5" href="#section5">
                <span class="cd-dot"></span>
                <span class="cd-label">Pricing</span>
            </a>
        </li>
        <li>
            <a data-number="6" href="#section6">
                <span class="cd-dot"></span>
                <span class="cd-label">Contact</span>
            </a>
        </li>
    </ul>
</nav>

    <section id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    </section>

    <section id="section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>        

    </section>

    <section id="section3">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>   
    </section>

</body>

我需要编写哪些 JavaScript/Ajax/jQuery/HTML/CSS 代码才能使其工作？

这就是我们如何“动态”更改代码上的 { class="is-selected" } ：-

<li> <a data-number="2" href="#section2" class=""> <span class="cd-dot">      </span> <span class="cd-label">About</span> </a> </li>

其他代码部分/导航部分上的等等 ???我想这会解决问题

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

您可以为活动课程执行此操作（很像@Sachink 建议的）：

var $navLinks = $('#cd-vertical-nav a');

$navLinks.on('click', function(){
  $navLinks.removeClass('is-selected');
  $(this).addClass('is-selected');
});

对于滚动，您需要查看每个<section>s 中的滚动位置，当scrollTop 匹配某个部分时，将相应菜单项的类设置为is-selected，如下所示：

var windowHeight = $(window).height();
$('section').each(function(){
  var $this = $(this);
  $(document).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var offset = $this.offset().top;
    var height = $this.outerHeight();

    if (offset + height <= scrollTop || offset >= scrollTop + (windowHeight - (height / 2))) {
      return;
    }

    var selector = '[href="#' + $this.prop('id') + '"]';
    var $menuItem = $navLinks.filter(selector);

    $navLinks.removeClass('is-selected');
    $menuItem.addClass('is-selected');
  });
});

您可以在此处查看一个工作示例：http://jsfiddle.net/5w2bkd6k/2/

【讨论】：

谢谢，它可以在 jsfiddle 中使用，但我尝试将 javascript 代码分别包含在和中，但它不起作用。我需要把这段代码放在哪里？您可以将所有代码包含在 1 个文件中并发布吗？谢谢
想通了，将上面的 JavaScript 封装在一个函数中并在正文中调用它。例如：-
if (offset + height = scrollTop + (windowHeight - (height / 2))) { return; } var 选择器 = '[href="#' + $this.prop('id') + '"]'; var $menuItem = $navLinks.filter(selector); $navLinks.removeClass('is-selected'); $menuItem.addClass('is-selected'); }); }); } 并在 body 中调用它，如下所示：-

【解决方案2】：

您需要添加以下 jQuery 代码：

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

见小提琴：http://jsfiddle.net/sachinkk/5w2bkd6k/1/

或

我建议您使用以下代码进行平滑滚动

    $(document).ready(function(){
        $('nav li a').click(function(){
            $('nav li a').removeClass('is-selected');
            $(this).addClass('is-selected');
            event.preventDefault();
            var toGo = $(this).attr('href');
            $('html, body').animate({
                scrollTop: $(toGo).offset().top
            }, 1000);
        })
    });

【讨论】：

如果添加任何类作为选择器而不是 nav li a 会更好。
感谢@Sachink，导航菜单点的颜色会“仅在”单击该点而不是“滚动”时更改。你如何在“滚动”上做到这一点？
@sachintendulkar 看到这个问题的正确答案，将滚动JS代码放入$(document).ready(function(){ // code here });
对不起，我的错，我只是尝试了第一个代码并没有尝试第二个代码sn-p。它正在工作，谢谢