我是新来的，但我已经搜索了一段时间，不仅仅是在这个网站上找到解决方案。
好的，问题在于：
我构建了一个包含多个部分的静态页面。每个部分都可以通过导航栏中的锚链显示，该链接在页面左侧是静态的。如何实现，屏幕上显示的部分链接是否有效？
如果这些部分属于外部html文件，那应该很容易。但我无法找到一种方法来实现这一点......
<div id="navbar">
<ul>
<li><h5><a href="#1" class="active">SERVICE</a> </br> </br></h5></li>
<li><h5><a href="#2" class="inactive">LEISTUNGEN</a> </br> </br></h5></li>
<li><h5><a href="#3" class="inactive">ÜBER UNS</a> </br> </br></h5></li>
<li><h5><a href="#4" class="inactive">PARTNER</a> </br> </br></h5></li>
<li><h5><a href="#5" class="inactive">KONTAKT</a> </br></h5></li>
</ul>
我想到了一个可以改变链接类的JavaScript，但是我无法让它工作......
请帮助我，告诉我应该做些什么！
最后但并非最不重要的，请原谅我糟糕的英语和编码知识;）
有关我要创建的页面的进一步说明！ 这是我的导航菜单，左侧有固定位置！
<div id="navbar">
<ul>
<li><h5><a href="#1">SERVICE</a> </br> </br></h5></li>
<li><h5><a href="#2">LEISTUNGEN</a> </br> </br></h5></li>
<li><h5><a href="#3">ÜBER UNS</a> </br> </br></h5></li>
<li><h5><a href="#4">PARTNER</a> </br> </br></h5></li>
<li><h5><a href="#5">KONTAKT</a> </br></h5></li>
</ul>
</div>
它继续一个大部分，其内容是4个小部分。这些部分如下所示：
<div id="weiss">
<div id="1" class="content section" data-id="1">
<div class="page page-1">
<div class="topic">
<img class="mwlogo" src="media/logo.png"/>
</div>
<div class="text">
<h2>...</h2>
</div>
<div class="vorteile">
<div class="first">
<ol>
<li><p>...</li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
<div class="last">
<ol>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
<li><p>...</p></li>
</ol>
</div>
</div>
</div>
</div>
<div>
我链接到index.html中的activemenuitem：
<script type="text/javascript" src="functions/js/activemenuitem.js"></script>
看起来像这样：
function checkActiveSection ()
{
var fromTop = jQuery(window).scrollTop() ;
jquery('#weiss .section'.each(function() {
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;
但问题仍然存在，似乎没有办法让我这样做！加载站点时加载脚本，但没有从菜单类中添加或删除任何类。我需要做什么？！ 请帮帮我！
答案 0 :(得分：0)
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ;
if(topMargin < 100)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap1").addClass('active');
}
else if(topMargin > 100 && topMargin <200)
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap2").addClass('active');
} else
{
$("#navbar li a").removeClass('active');
$("#navbar li a.chap3").addClass('active');
}
});
});
</script>
<div id="navbar">
<ul>
<li><h5><a href="#1" class="chap1 active">SERVICE</a> </br> </br></h5></li>
<li><h5><a href="#2" class="chap2 inactive">LEISTUNGEN</a> </br> </br></h5></li>
<li><h5><a href="#3" class="chap3 inactive">ÜBER UNS</a> </br> </br></h5></li>
</ul>
</div>
答案 1 :(得分：0)
以下是针对您的案例改编自Change Active Menu Item on Page Scroll?的解决方案：
即使它没有完全优化，它也会变得更加简单。
<div id="navbar">
<ul>
<li><h5><a href="#1">SERVICE</a></h5></li>
<li><h5><a href="#2">LEISTUNGEN</a></h5></li>
<li><h5><a href="#3">ÜBER UNS</a></h5></li>
<li><h5><a href="#4">PARTNER</a></h5></li>
<li><h5><a href="#5">KONTAKT</a></h5></li>
</ul>
</div>
<div id="sections">
<div class="section" data-id="1">
<h2>Services</h2>
<p></p>
</div>
<div class="section" data-id="2">
<h2>LEISTUNGEN</h2>
<p></p>
</div>
<div class="section" data-id="3">
<h2>Section 3</h2>
<p></p>
</div>
<div class="section" data-id="4">
<h2>Section 4</h2>
<p></p>
</div>
<div class="section" data-id="5">
<h2>Section 5</h2>
<p></p>
</div>
</div>
CSS
body {
font-family: Helvetica, Arial;
}
#navbar {
position: fixed;
z-index: 1;
left: 0;
right: 0;
top: 0;
width:100px ;
}
#navbar li.active a {
color:red ;
font-weight:bold ;
}
#sections {
margin-left:110px ;
}
JS
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
jQuery('#sections .section').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('#navbar li').removeClass('active') ;
jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;
}
}) ;
}
jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
var idSectionGoto = jQuery(this).closest('li').data('id') ;
$('html, body').stop().animate({
scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
}, 300,function(){
checkActiveSection() ;
});
e.preventDefault() ;
}) ;