我的側邊欄中有一個選單，其中包含如下錨鏈接：
<ul>
<li><a href="#anchor1">Link 1</a></li>
<li><a href="#anchor2">Link 2</a></li>
<li><a href="#anchor3">Link 3</a></li>
</ul>
現在我需要用粗體突出顯示活動的 li，這樣當用戶看到錨鏈接時（例如通過向下滾動頁面或單擊鏈接），它是粗體的。我怎樣才能做到這一點？
編輯澄清：我顯示鏈接的 html 是：
<div class="anchorlink id="anchor1">
<h2>Link 1</h2>
<p>Some text...</p>
</div>
<div class="anchorlink id="anchor2">
<h2>Link 2</h2>
<p>Some text...</p>
</div>
<div class="anchorlink id="anchor3">
<h2>Link 3</h2>
<p>Some text...</p>
</div>
uj5u.com熱心網友回復：
在這里我使用Intersection_Observer_API
當前一個內容的位在視口中時，我們需要調整邊距以僅使一個鏈接處于活動狀態
let callback = (entries, observer) => {
entries.forEach(entry => {
const href = document.querySelector(`[href="#${entry.target.id}"]`)
href.classList.toggle('active',entry.isIntersecting)
});
};
const observer = new IntersectionObserver(callback);
const divs = document.querySelectorAll('.content');
divs.forEach(div => observer.observe(div));.content {
height: 700px;
border: 1px solid black;
margin-bottom: 50px
}
.active {
font-weight: bold;
}<ul style="position: fixed">
<li><a href="#anchor1">Link 1</a></li>
<li><a href="#anchor2">Link 2</a></li>
<li><a href="#anchor3">Link 3</a></li>
</ul>
<div style="height:500px; overflow auto">
<div class="content" id="anchor1">Anchor 1</div>
<div class="content" id="anchor2">Anchor 2</div>
<div class="content" id="anchor3">Anchor 3</div>
</div>uj5u.com熱心網友回復：
如果您有一個應用于當前 li 的 .active 類，請使用font-weight:bold
.active{
font-weight:bold;
}<ul>
<li><a href="#anchor1">Link 1</a></li>
<li class="active"><a href="#anchor2">Link 2</a></li>
<li><a href="#anchor3">Link 3</a></li>
</ul>uj5u.com熱心網友回復：
這里有你想要的演示。
$(".menu li a").click(function() {
$('li a').not(this).removeClass('active');
$(this).toggleClass('active');
});
$(document).ready(function(){
var link1 = $('#home').offset().top;
var link2 = $('#about').offset().top;
var link3 = $('#contact').offset().top;
$(window).scroll(function() {
var winTop = $(window).scrollTop();
if(winTop >= link1 && winTop < link2){
$('.home').addClass("active");
}
else if(winTop >= link2 && winTop < link3){
$('.about').addClass("active");
$('.home').removeClass("active");
}
else if(winTop >= link3){
$('.about').removeClass("active");
$('.contact').addClass("active");
}else{
$('a').removeClass("active");
}
});
});a.active{
font-weight:bold;
}
html{
scroll-behavior: smooth;
}
.menu{
postion:relative;
}
.menu ul{
position:fixed;
top:0px;
}
div{
padding-top:100px;
}
#contact{
padding-bottom:100px;
}<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="menu">
<ul>
<li><a href="#home" class="home">Link 1</a></li>
<li><a href="#about" class="about">Link 2</a></li>
<li><a href="#contact" class="contact">Link 3</a></li>
</ul>
</div>
<div id="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="about">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div id="contact">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/463877.html