我正在尝试做垂直点导航栏。我正在使用ul li里面的一个href链接。我希望当我点击li而不仅仅是一个链接。我正在寻找css中的东西，但我找不到。
;(function ( $, window, document) {
var pluginName = 'eavesdrop';
var calls = 0;
function Eavesdrop(nav, options){
this.element = nav;
this._name = pluginName;
this._defaults = $.fn.eavesdrop.defaults;
this.options = $.extend( {}, this._defaults, options );
this.init();
}
$.extend(Eavesdrop.prototype, {
constructor: Eavesdrop,
init: function(){
var clickParams = $.proxy(this.clickParams, this);
var scrollParams = $.proxy(this.scrollParams, this);
var structure = $.proxy(this.structure, this);
this.buildCache();
this.errors();
this.scrollClick = this.navAnchor.on('click', clickParams);
this.scrollStructure = $(window).on('load resize', structure);
this.scrollWindow = $(window).on("load resize scroll", scrollParams);
this.onScroll();
},
destroy: function(){
this.unbindEvents();
this.$element.removeData();
},
buildCache: function(){
var selector = '.'+this.options.watchClass;
this.$element = $(this.element);
this.$body = $('body');
this.$selector = $(selector);
this.navAnchor = this.$element.find('a');
this.selector = selector;
this.activeClass = this.options.activeClass;
this.targets = $([]);
this.distances = $([]);
this.selectors = $([]);
this.anchors = $([]);
},
unbindEvents: function() {
this.$element.off('.'+this._name);
},
errors: function(){
var selectorAmount = this.$selector.length;
var navAmount = this.$element.find('a').length;
navAmount === selectorAmount ? this.universalAmount = navAmount : console.error('target to selector mismatch');
},
structure: function(){
var self = this;
this.$selector.each(function(i){
i++
var hash = self.navAnchor.eq(i - 1).attr('href').split('#')[1];
$(this).attr('data-connect', hash);
var connect = $(this).data('connect');
offset = $(this).offset().top;
self.targets.push(connect);
self.distances.push(offset);
self.selectors.push(i);
});
},
clickParams: function(data){
var router = data.currentTarget.hash.split('#')[1];
var target = this.selector + '[data-connect="'+ router +'"]';
var targetOffset = $(target).offset().top;
this.$body.trigger(router[1] + '-inView');
this.$body.animate({ scrollTop: (targetOffset) });
},
scrollParams: function(){
var d = $(window).scrollTop();
var inView = {};
for (var i = 0; i < this.universalAmount; i++){
var scrollHeight = d - this.distances[i];
scrollHeight < 0 ? inView[this.selectors[i]] = Infinity : inView[this.selectors[i]] = scrollHeight;
var currentlyInView = Object.keys( inView ).map(function ( key ) { return inView[key]; });
var min = Math.min.apply( null, currentlyInView );
var viewPos = currentlyInView.indexOf(min);
}
if(this.$element.attr('data-active') != viewPos){
this.$element.attr('data-active', (viewPos));
this.$body.trigger('active.'+this._name);
}
},
onScroll: function(){
var self = this;
self.$body.on('active.'+this._name, function(){
var a = self.$element.attr('data-active') || 0;
self.$element.find('.'+self.activeClass).removeClass(self.activeClass);
self.$element.find('a[href*="'+ self.targets[a] +'"]').parent().addClass(self.activeClass);
if(self._defaults.trackUrl == true){
history.replaceState(undefined, undefined, "#"+self.targets[a]);
}
});
}
});
$.fn.eavesdrop = function ( options ) {
calls ++
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Eavesdrop( this, options ) );
}
});
if(calls > 1){
$.fn.eavesdrop.defaults.trackUrl = false;
}
return this;
};
$.fn.eavesdrop.defaults = {
watchClass: 'eavesdrop',
activeClass: 'active',
trackUrl: true
};
})( jQuery, window, document );.full {
display: block;
height: 100vh;
line-height: 100vh;
text-align: center;
color: #000;
font-size: 40px;
font-family: 'Secular One', sans-serif;
}
.full.one {
background: #8CC9DC; }
.full.two {
background: #DEEBF7; }
.full.three {
background: #FFFAFA; }
.full.four {
background: #C5E0B4; }
.full.five {
background: #DFE2E6; }
.full.six {
background: #fff; }
.full.seven {
background: #33CCCC; }
.dotstyle {
position: fixed;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.dotstyle ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dotstyle-tooltip li {
position: relative;
display: block;
margin: 30px 16px;
width: 30px;
height: 30px;
background-color: #969696;
border-radius: 50%;
border: 2px solid #969696;
-webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.dotstyle-tooltip li a {
cursor: pointer;
position: absolute;
text-decoration: none;
display: block;
font-family: 'Heebo', sans-serif;
top: auto;
left: -149%;
padding: 0 10px;
width: auto;
height: auto;
border-radius: 0;
color: #fff;
text-indent: 0;
line-height: 2;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
}
.dotstyle-tooltip li a::after {
position: absolute;
left: 100%;
border-width: 6px;
margin-top: -6px;
border-color: transparent;
content: '';
pointer-events: none;
top: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.dotstyle-tooltip li:hover {
z-index: 100;
}
.dotstyle-tooltip li:hover a{
z-index: 100;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(0%);
transform: translateX(-50%) translateY(0%);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.dotstyle-tooltip li.active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
background-clip: content-box;
padding:3px;
right:3px;
}
.dotstyle-tooltip li.active a {
left: -120%;
}
.dotstyle-tooltip #startLi.active,.dotstyle-tooltip #startLi:hover,.dotstyle-tooltip #startLi a {
background-color: #FFC000;
}
.dotstyle-tooltip #startLi.active {
border: 2px solid #FFC000;
}
.dotstyle-tooltip #startLi a::after{
border-left-color: #FFC000;
}
.dotstyle-tooltip #firstLi.active,.dotstyle-tooltip #firstLi:hover,.dotstyle-tooltip #firstLi a {
background-color: #ED7D31;
}
.dotstyle-tooltip #firstLi.active {
border: 2px solid #ED7D31;
}
.dotstyle-tooltip #firstLi a::after{
border-left-color: #ED7D31;
}
.dotstyle-tooltip #secondLi.active,.dotstyle-tooltip #secondLi:hover,.dotstyle-tooltip #secondLi a {
background-color: #C00000;
}
.dotstyle-tooltip #secondLi.active {
border: 2px solid #C00000;
}
.dotstyle-tooltip #secondLi a::after{
border-left-color: #C00000;
}
.dotstyle-tooltip #thirdLi.active,.dotstyle-tooltip #thirdLi:hover,.dotstyle-tooltip #thirdLi a {
background-color: #7030A0;
}
.dotstyle-tooltip #thirdLi.active {
border: 2px solid #7030A0;
}
.dotstyle-tooltip #thirdLi a::after{
border-left-color: #7030A0;
}
.dotstyle-tooltip #fourLi.active,.dotstyle-tooltip #fourLi:hover,.dotstyle-tooltip #fourLi a {
background-color: #44546A;
}
.dotstyle-tooltip #fourLi.active {
border: 2px solid #44546A;
}
.dotstyle-tooltip #fourLi a::after{
border-left-color: #44546A;
}
.dotstyle-tooltip #fiveLi.active,.dotstyle-tooltip #fiveLi:hover,.dotstyle-tooltip #fiveLi a {
background-color: #70AD47;
}
.dotstyle-tooltip #fiveLi.active {
border: 2px solid #70AD47;
}
.dotstyle-tooltip #fiveLi a::after{
border-left-color: #70AD47;
}
.dotstyle-tooltip #aboutLi.active,.dotstyle-tooltip #aboutLi:hover,.dotstyle-tooltip #aboutLi a {
background-color: #000;
}
.dotstyle-tooltip #aboutLi.active {
border: 2px solid #000;
}
.dotstyle-tooltip #aboutLi a::after{
border-left-color: #000;
}<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>תפריט</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link href='https://fonts.googleapis.com/css?family=Heebo&subset=hebrew,latin' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Secular+One&subset=hebrew,latin' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="dotstyle dotstyle-tooltip">
<ul class="nav-fixed">
<li id="startLi" ><a href="#one">פתיחה</a></li>
<li id="firstLi" ><a href="#two">קומה 1</a></li>
<li id="secondLi"><a href="#three">קומה 2</a></li>
<li id="thirdLi"><a href="#four">קומה 3</a></li>
<li id="fourLi"><a href="#five">קומה 4</a></li>
<li id="fiveLi"><a href="#six">קומה 5</a></li>
<li id="aboutLi"><a href="#seven">אודות</a></li>
</ul>
</div>
<div class="one full eavesdrop">פתיחה</div>
<div class="two full eavesdrop">קומה 1</div>
<div class="three full eavesdrop">קומה 2</div>
<div class="four full eavesdrop">קומה 3</div>
<div class="five full eavesdrop">קומה 4</div>
<div class="six full eavesdrop">קומה 5</div>
<div class="seven full eavesdrop"> אודות</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/jquery.eavesdrop.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.top-nav').eavesdrop();
$('.nav-fixed').eavesdrop();
});
</script>
</body>
</html>