我正在尝试了解当用户滚动页面时链接将如何改变颜色。一个例子是 this page .右侧是 in this article 下方的链接。
在我的示例中，我希望 titlex 根据用户看到/滚动的内容改变颜色。
page.html:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<style type="text/css">
<!--
body.container {
width: 100%;
}
.maintext {
min-height: 1080px;
width: calc(100% - 210px);
float: right;
background: #FFFCB5;
}
iframe.side1,
iframe.side2 {
position: fixed;
left: 0;
width: 200px;
}
iframe.side1 {
top: 0;
height: 300px;
background: #D5F6E4;
}
iframe.side2 {
top: 300px;
height: 100px;
background: #D5E2F6;
}
-->
</style>
<script src="style_switcher.js"></script>
</head>
<body>
<div class="container">
<div class="maintext">
<a name="dic1"></a><h3> Dict1</h3><br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
<a name="dic2"></a><h3> Dict2</h3><br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
<a name="dic3"></a><h3> Dict3</h3><br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
<a name="dic4"></a><h3> Dict4</h3><br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
ddd<br/>
</div>
<iframe class="side1" src="side1.html" frameborder="0"></iframe>
<!-- <iframe class="side2" src="side2.html" frameborder="0"></iframe> -->
</div>
</body>
</html>
side1.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
a { DISPLAY: block; }
.active {
border-left: solid 3px #0072c6;
color: #0072c6;
}
-->
</style>
<script src="style_switcher.js"></script>
</head>
<body>
<a class="menu" target="_parent" href="page.html#dic1" title="title" > title1</a>
<a class="menu" target="_parent" href="page.html#dic2" title="title" > title2</a>
<a class="menu" target="_parent" href="page.html#dic3" title="title" > title3</a>
<a class="menu" target="_parent" href="page.html#dic4" title="title" > title4</a>
</body>
</html>
style_switcher.js:
$('a.menu').on('click', function() {
$('.active').removeClass('.active');
$('this').addClass('.active');
});
我正在尝试 example here , 但我不明白。
我开始使用下一个代码，但我真的很想滚动
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
a.menu {
DISPLAY: block;
border-left: solid 3px #D41B1B;
color: #D41B1B;
}
a.active {
border-left: solid 3px #0072c6;
color: #0072c6;
}
-->
</style>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$(".menu").mouseleave(function(){
$(this).css("background-color", "lightblue");
});
});
</script>
</head>
<body>
<p id="p1">a paragraph.</p>
<a class="menu" target="_parent" href="page.html#dic1" title="title" > title1</a>
</body>
</html>
最佳答案
首先不要使用 iframe，将 side1 中的 html 集成到您的原始页面并将它们包装在一个以防您稍后要定位它们。
您正在寻找的称为锚定，其中 anchor 就像网页的小型 gps 系统。在 javascript 中，您可以通过添加一个特殊的类“active”来为这些 anchor 着色，例如使用样式:
.active {
border-left: solid 3px #0072c6;
color: #0072c6;
}
现在在 JS 中(使用 JQuery)为被点击的添加 active
$('a.menu').on('click', function() {
$('.active').removeClass('.active');
$('this').addClass('.active');
});
这就是您所需要的。
关于html - 链接在滚动时改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42367858/