突出显示活动超文本标记语言部分的相应菜单项
我有一个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选项1的部分时，ok-console.log会给我选项1，但当我在选项2时，它会给我选项2和所有之前的部分（因为它们都在它下面）——在这种情况下也是选项1。
你知道任何jQuery trics来处理它吗？谢谢帮忙。
共有2个答案
您只需在单击时添加active类（带有一些活动样式），然后像这样删除它
$(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(){
var lastId,
topMenu = $(".menu_links"),
menuItems = topMenu.find("a"),
scrollItems = menuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
menuItems.click(function (e) {
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 1200);
e.preventDefault();
});
$(window).scroll(function () {
var fromTop = $(this).scrollTop();
var cur = scrollItems.map(function () {
if ($(this).offset().top <= fromTop)
return this;
});
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
});body{
margin: 0;
}
*{
box-sizing: border-box;
}
section{
height: 100vh;
}
.menu_links{
margin: 0px;
padding: 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: rgba(255,255,255,0.75);
}
.menu_links li{
display: inline-block;
float: left;
}
.menu_links li a{
padding: 10px;
color: #000;
text-decoration: none;
display: inline-block;
}
.menu_links li.active a{
background-color: blue;
color: #fff;
}<body>
<ul class="menu_links">
<li class="active"><a href="#section1">section1</a></li>
<li><a href="#section2">section2</a></li>
<li><a href="#section3">section3</a></li>
<li><a href="#section4">section4</a></li>
</ul>
<section id="section1" style="background-color: pink"></section>
<section id="section2" style="background-color: red"></section>
<section id="section3" style="background-color: orange"></section>
<section id="section4" style="background-color: green"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>-
我确信这对我来说是简单而愚蠢的，但是我的php代码一直显示在我的html页面中。 这只是一个简单的测试： 这就是它的样子： 我到底做错了什么？上面我混合了回声和打印来表明它似乎没有什么不同。
-
我正在用HTML发送一封电子邮件时事通讯。在HTML中，我有如下内容
-
布局/模板文件在中定义： 然后在中产生： 两个文件都存在于同一个目录中，并且web.php中定义了的路由： 然而，导航到时唯一显示的是未定义的“error”，我将它作为帮助程序的第二个参数传递给它。在浏览器中检查显示未加载该节。 由于模板继承在没有错误的情况下悄无声息地失败，而且因为Laravel显然甚至没有打印警告的直观方式，这样一个基本的用例对我来说似乎不可能调试。 这里发生了什么，或者，我将
-
我正在使用ITextRenderer从html生成PDF。然而，我得到以下异常： 你能帮帮我吗？ 任何帮助都将不胜感激。 先谢谢你。
-
问题内容： 我有一个基于以下示例的菜单： item是一个对象，包含菜单项信息。这是指令和控制器的JavaScript代码： 问题是，套到只有一次页面渲染过程中，但是当你点击一个菜单项，没有一切发生的时候。我想这是因为菜单本身并未重新加载，而我只是在其中更改了数据。那么如何在不重新加载整个页面的情况下使它工作呢？ 问题答案： 试试看：-http : //jsfiddle.net/uDPHL/146/
-
我正在想办法完全自动化詹金斯的硒测试。 我的全部想法是：我想用Selenium IDE记录一个测试。然后将测试另存为HTML代码。将HTML文件放在test1中。和詹金斯一起在服务器上测试。Jenkins应该根据HTML文件的信息进行测试。 最后一句话现在是问题所在。我找不到一种简单的方法将HTML文件转换成可能的JUnit测试并运行它。 我找到了selenese4j，这个想法很好，但它只返回测试