【发布时间】：2013-05-05 09:12:23
【问题描述】：
我正在搜索的代码非常简单，只是我有 div 和菜单，我希望当我通过滚动到达第一个 div 时，菜单中的第一个 ul 会自动更改其样式，然后当我滚动到第二个 div 第二个 url 样式更改为另一种样式，就像那样...我得到了问题的答案，我有代码，但我不喜欢它，因为它非常高，并且它包含我得到的每个 div 的代码。 据我所知，我可以找到一个在 jQuery 中为整个 div 完成工作的短代码。 我想要的和这段代码完全一样（我无法让它通过http://jsfiddle.net/ 工作，如果有人知道如何在那里加载jquery，请加载它并给我url）
<html>
<style>
#menu {
background-color:#ccc;
position:fixed;
width:100%;
}
.menutext {
padding:25 40 30 !important;
display:inline-block;
}
.menutext2 {
padding:25 40 0 !important;
display:inline-block;
color:red;
}
.alldivs {
width:300px;
height:200px;
background-color:a9a9a9;
}
</style>
<div id="menu">
<div class="menutext" linkId="DIV1">Change the style of me to .mebutext2 on arriving to DIV1</div>
<div class="menutext" linkId="DIV2">Change the style of me to .mebutext2 on arriving to DIV2</div>
<div class="menutext" linkId="DIV3">Change the style of me to .mebutext2 on arriving to DIV3</div>
</div>
<br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV1">DIV1</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV2">DIV2</div></div>
<br><br><br><br><br><br><br><br>
<div class="alldivs"><div class="contentDiv" id="DIV3">DIV3</div></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
var menu=$('#menu'),
menuText=menu.find('.menuText'),
DIV1=$('#DIV1'),
DIV2=$('#DIV2'),
DIV3=$('#DIV3'),
DIV1Top=DIV1.offset().top,
DIV2Top=DIV2.offset().top,
DIV3Top=DIV3.offset().top;
$(window).scroll(function(e) {
var win=$(this),
scrollTop=$(this).scrollTop();
//to make nav menu selected according to scroll
var start=scrollTop;
menuText.filter('.menutext2').removeClass('menutext2').addClass('menutext');
if(start>DIV3Top){
menuText.filter('[linkId="DIV3"]').removeClass('menutext').addClass('menutext2');
}
else if (start>DIV2Top){
menuText.filter('[linkId="DIV2"]').removeClass('menutext').addClass('menutext2');
}
else if(start>DIV1Top){
menuText.filter('[linkId="DIV1"]').removeClass('menutext').addClass('menutext2');
}
});
});
</script>
【问题讨论】：
-
"如果有人知道如何加载 jquery [in jsfiddle] 请加载它并给我 url" - 只需查看左侧的“Frameworks & Extensions”面板jsfiddle 页面的...
-
我尝试在那里更改设置（到 jQuery 阅读器）但它不起作用:(
-
再看一遍 - 这是 first 下拉列表...除了小提琴问题，我不明白你的问题是什么。您似乎在说您想将一些 JavaScript 转换为 jQuery，但是 (a) jQuery 是 JavaScript，而不是一种单独的语言，并且 (b) 您展示的代码已经使用了大量的 jQuery。请更清楚地解释您要达到的目标。
-
@AhmadTantori 您错过了将代码放在测试环境中以使人们更容易帮助您的全部意义......现在您正在侮辱那些试图提供帮助的人。不要无知！
标签： javascript jquery html styles