javascript - 突出显示活动 HTML 部分的相应菜单项
问题描述
我有一个position: fixed
菜单,其中元素是我页面中的部分标题。如果我目前在任何部分,我需要在菜单中突出显示相应的项目。不是在单击菜单项时 - 当我滚动到部分时,我需要它来工作。
菜单代码在这里:
<section class="block-product-tabs">
<div class="block-content">
<div class="block-item">
<a href="#option-1">
OPTION 1
</a>
</div>
<div class="block-item">
...
</div> </section>
和示例部分:
<section class="block-title" data-target-id="option-3">
<div class="title">Option 3</div>
</section>
我尝试使用 jQuery:
var sections_array = $('section.block-title');
$(window).scroll(function() {
var window_scroll = $(this).scrollTop();
$(sections_array).each( function() {
var el_position = $(this).offset().top + $(this).outerHeight() - $(window).height();
if (window_scroll > el_position) {
console.log($(this).data('target-id'));
}
});
});
但它就像多米诺骨牌一样,当我在 name 部分时Option 1
,ok-console.log 给了我option-1
,但是当我在上面时,Option 2
它给了我option-2
和所有以前的部分(因为它们在它下面) - 在这种情况下也是option-1
。
你知道任何 jQuery trics 来处理它吗?感谢帮助。
解决方案
您只需要添加active
类(带有一些活动样式)on click
并像这样删除它
$(document).ready(function(){
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
});
body{
font-sze:14px;
}
.container{
max-width:960px;
margin:0 auto;
}
nav ul li{
list-style:none;
float:left;
padding-right:20px;
}
nav ul li a{
text-decoration:none;
color:#222;
background-color:#ccc;
padding:4px 5px;
}
.active{
background-color:#d90000;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div style="text-align:center;margin-top:25px;font-weight:bold;texxxt-decoration:none;">
Visit <a href="https://themeshook.com/" px;target="_blank">My Blog</a>
</div>
<div class="container">
<nav class="navecation">
<ul id="navi">
<li><a class="menu active"#">About </a></li>
<li><a class="menu" href="#">Contact </a></li>
<li><a class="menu" href="#">Services</a></li>
<li><a class="menu" href="#">Contact Us</a></li>
<li><a class="menu" href="http://www.mywebtricks.com/2014/03/add-active-class-to-navigation-menu.html">Read Our Blog</a></li>
</ul>
</nav>
</div>
<body>
在您的情况下,选择器如下(因为您的结构不同)
$(document).ready(function(){
$('.block-content .block-item a').click(function(){
$('.block-item a').removeClass("active");
$(this).addClass("active");
});
});
然后.active
风格
.active{
background-color:#d90000;
color:#fff;
}
单击和窗口滚动时的活动链接
注意:您需要更改我上面提到的选择器
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
推荐阅读
- c# - 如何避免看似自动引用“父”命名空间?
- github - 将 master 变基到上游
- parsing - Logstash grok - Apache 访问日志
- wordpress - 如何使用 WordPress、Elementor pro 创建客户端门户?
- java - 在 android 11 及更低版本中设置灯光状态栏的代码 android 11 弃用警告不会发生
- unity3d - 为什么统一 2020 和 2019 不断崩溃?
- java - 迭代地图列表以仅写入其内容
- amazon-web-services - 无法将 Glacier 深度存档恢复到不同的 S3 存储桶
- javascript - Reactjs 功能组件默认 props 和 props 对象
- laravel - Laravel:此集合实例上不存在属性 [用户]