我实现了垂直点导航。 (1)问题是事件点的颜色没有变成白色。如图 所示,只有第一个保持白色,尽管它未处于事件状态。 . (2)如何降低点位?我尝试了 position、right 和 top 属性,但没有改变。
.vNav {
position:absolute;
right:7px;
top:200px;
width: 50px;
z-index: 9999;
list-style-type: none;
}
我的 HTML
是
<form class="summarybackground" name="summary" id="summary" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox" id="section">
<div class="vNav">
<ul class="vNav">
<li> <a href="#section1"><div class="label">Landed</div></a>
</li>
<li> <a href="#section2"><div class="label">Apartment</div></a>
</li>
<li> <a href="#section3"><div class="label"> Condominium </div></a>
</li>
<li> <a href="#section4"><div class="label"> Commercial </div></a>
</li>
<li> <a href="#section5"><div class="label"> Farm </div></a>
</li>
</ul>
</div>
<div class="col-sm-9">
<div id="section1" class="par">
<h1>Landed</h1>
</div>
<div id="section2" class="par">
<h1>Apartment</h1>
</div>
<div id="section3" class="par">
<h1>Condominium</h1>
</div>
<div id="section4" class="par">
<h1>Commercial</h1>
</div>
<div id="section5" class="par">
<h1>Farm</h1>
</div>
</div>
</div>
</form>
Javascript 是
<script>
$(document).ready(function ($) {
var parPosition = [];
$('.par').each(function () {
parPosition.push($('form').offset().top);
});
$('a').click(function () {
$('form').animate({
scrollTop: $($.attr('form', 'href')).offset().top
}, 500);
return false;
});
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$('form').addClass('active');
});
$('.vNav a').hover(function () {
$(this).find('.label').show();
}, function () {
$(this).find('.label').hide();
});
$(document).scroll(function () {
var position = $('form').scrollTop(),
index;
for (var i = 0; i < parPosition.length; i++) {
if (position <= parPosition[i]) {
index = i;
break;
}
}
$('.vNav ul li a').removeClass('active');
$('.vNav ul li a:eq(' + index + ')').addClass('active');
}).scroll();
$('.vNav ul li a').click(function () {
$('.vNav ul li a').removeClass('active');
$(form).addClass('active');
});
});
</script>
CSS 是
.summarybackground {background-color:#000000;}
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 850px;
height: 500px;
margin-bottom: 150%;
}
.vNav {
position:absolute;
right:7px;
top:200px;
width: 50px;
z-index: 9999;
list-style-type: none;
}
.vNav ul {
position: relative;
padding: 3px;
padding-left: 35%;
}
.vNav ul li {
position: relative;
padding-bottom: 20px;
padding-left: 35%;
color: rgb(113, 135, 133);
}
.vNav a {
display: block;
width: 13px;
height: 13px;
text-indent: -9999px;
border-radius: 50%;
border: 2px solid;
border-color: rgb(113, 135, 133);
text-decoration: none;
}
.vNav a:hover {
border-radius: 50%;
background-color: rgb(113, 135, 133);
text-decoration: none;
}
.vNav a.active {
border-radius: 50%;
background-color: #ffffff;
text-decoration: none;
}
.label {
position:absolute;
right: 5%;
top: 40%;
width: 100%;
text-align: right;
font-size: 2em;
color: #ffffff;
display: none;
}
div.col-sm-9 div {
height: 500px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section4 {color: #fff; background-color: #00bcd4;}
#section5 {color: #fff; background-color: #009688;}
最佳答案
从 UL 标签中删除了 class='vNav'。
将事件链接的背景更改为红色,因为我无法将链接点放在黑色背景之上。
CSS:
.vNav a.active {
border-radius: 50%;
background-color: #ff0000;
text-decoration: none;
}
Javascript:
<script>
$(document).ready(function ($) {
$('.vNav > ul > li > a').click(function() {
$('.vNav > ul > li > a').removeClass();
$(this).addClass('active');
});
});
</script>
关于javascript - 垂直点导航中事件点的颜色不会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34824198/