我实现了垂直点导航。 (1)问题是活动点的颜色不会变为白色。只是第一个保持白色虽然没有活动,如图所示。 (2)如何降低点位?我尝试了位置,右侧和顶部属性,但没有改变。
.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;}
答案 0 :(得分:0)
删除了类=&#39; vNav&#39;来自UL标签。
将活动链接的背景更改为红色,因为我无法将链接点放在黑色背景上方。
的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>
答案 1 :(得分:0)
最后,我可以设法让事情发挥作用。我的解决方案如下。 HTML
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
<li>
<a data-number="2" href="#section2" class="">
<span class="cd-dot"></span>
<span class="cd-label">Apartment</span>
</a>
</li>
<li>
<a data-number="3" href="#section3" class="">
<span class="cd-dot"></span>
<span class="cd-label">Condominium</span>
</a>
</li>
<li>
<a data-number="4" href="#section4" class="">
<span class="cd-dot"></span>
<span class="cd-label">Commercial</span>
</a>
</li>
<li>
<a data-number="5" href="#section5">
<span class="cd-dot"></span>
<span class="cd-label">Farm</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header">Landed</h1>
</div>
<div id="section2">
<h1 class="header">Apartment</h1>
</div>
<div id="section3">
<h1 class="header">Condominium</h1>
</div>
<div id="section4">
<h1 class="header">Commercial</h1>
</div>
<div id="section5">
<h1 class="header">Farm</h1>
</div>
</div>
CSS
#cd-vertical-nav {
position: absolute;
right: 4%;
top: 65%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#cd-vertical-nav a:after {
content: "";
display: table;
clear: both;
}
#cd-vertical-nav a span {
display: inline-block;
float: right;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-o-transform: scale(0.6);
transform: scale(0.6);
}
#cd-vertical-nav a:hover span {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#cd-vertical-nav a:hover .cd-label {
opacity: 1;
}
#cd-vertical-nav a.is-selected .cd-dot {
background-color: white;
}
#cd-vertical-nav .cd-dot {
display: inline-block;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #d88683;
-webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
-moz-transition: -moz-transform 0.2s, background-color 0.5s;
transition: transform 0.2s, background-color 0.5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#cd-vertical-nav .cd-label {
position: relative;
margin-right: 10px;
padding: .4em .5em;
color: white;
font-size: 14px;
font-size: 0.875rem;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
opacity: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
h1.header{
color: green;
text-align: center;
font-size: 1em;
}
div.col-sm-9 div {
height: 500px;
font-size: 18px;
}
#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;}
JAVASCRIPT
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>