我正在为我的单页网站使用一个小的Javascript导航栏。我的所有文本链接都工作正常，但右侧的出站社交媒体链接没有响应（除非您二次单击并从那里打开它）。现在，我对JQuery和Javascript几乎一无所知......我可以理解它以及它是如何工作的，但是当涉及到错误时，我无法弄清楚。谢谢你的帮助！:)
这是我的 CSS：
.single-page-nav {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .9);
padding: 1.25em 0;
box-shadow: 0px 2px 8px #555;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:100000;
}
.single-page-nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
margin-left: -30px;
width: 80%;
overflow: hidden;
}
.single-page-nav li {
float: left;
width: 16%;
text-align: center;
}
.single-page-nav a {
display: block;
color: #000;
font-family: 'Calibri', Helvetica, Sans-Serif;
text-decoration: none;
font-size: 18px;
font-weight: bold;
line-height:1.5em;
}
.single-page-nav a:hover,
.single-page-nav .current {
color: #F92F2C;
}
这是我的网页
<nav id="menu" role="navigation">
<div class="single-page-nav">
<ul>
<li><a href="#header">Page Top</a></li>
<li><a href="#videohead">Watch the Video</a></li>
<li><a href="#kickhead">Kickstarter</a></li>
<li><a href="#abouthead">About the Project</a></li>
<li><a href="#meethead">Meet the Team</a></li>
<li><a href="#whathead">What Are We Doing?</a></li>
</ul>
<span id="socialtop1">
<a href="mailto:divya@thedivyaproject.com"><img src="/wp-content/images/emailg.png" alt="Email" /></a>
</span>
<span id="socialtop2">
<a href="http://www.youtube.com/channel/UC94WMtUbVWAzXJIAxAw_cMg"><img src="/wp-content/images/ytg.png" alt="YouTube" /></a>
</span>
<span id="socialtop3">
<a href="http://www.vimeo.com/thedivyaproject"><img src="/wp-content/images/vmg.png" alt="Vimeo" /></a>
</span>
<span id="socialtop4">
<a href="http://www.instagram.com/thedivyaproject"><img src="/wp-content/images/instag.png" alt="Instagram" /></a>
</span>
<span id="socialtop5">
<a href="http://www.twitter.com/thedivyaproject"><img src="/wp-content/images/twg.png" alt="Twitter" /></a>
</span>
<span id="socialtop6">
<a href="http://www.facebook.com/thedivyaproject"><img src="/wp-content/images/fbg.png" alt="Facebook" /></a>
</span>
</div>
</nav>
最后但并非最不重要的一点是，这里是JQuery/Javascript。大部分内容不是我写的，它来自我使用的教程。
// Utility
if (typeof Object.create !== 'function') {
Object.create = function(obj) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function($, window, document, undefined) {
"use strict";
var SinglePageNav = {
init: function(options, container) {
this.options = $.extend({}, $.fn.singlePageNav.defaults, options);
this.container = container;
this.$container = $(container);
this.$links = this.$container.find('a');
if (this.options.filter !== '') {
this.$links = this.$links.filter(this.options.filter);
}
this.$window = $(window);
this.$htmlbody = $('html, body');
this.$links.on('click.singlePageNav', $.proxy(this.handleClick, this));
this.didScroll = false;
this.checkPosition();
this.setTimer();
},
handleClick: function(e) {
var self = this,
link = e.currentTarget,
$elem = $(link.hash);
e.preventDefault();
if ($elem.length) { // Make sure the target elem exists
// Prevent active link from cycling during the scroll
self.clearTimer();
// Before scrolling starts
if (typeof self.options.beforeStart === 'function') {
self.options.beforeStart();
}
self.setActiveLink(link.hash);
self.scrollTo($elem, function() {
if (self.options.updateHash) {
document.location.hash = link.hash;
}
self.setTimer();
// After scrolling ends
if (typeof self.options.onComplete === 'function') {
self.options.onComplete();
}
});
}
},
scrollTo: function($elem, callback) {
var self = this;
var target = self.getCoords($elem).top;
var called = false;
self.$htmlbody.stop().animate(
{scrollTop: target},
{
duration: self.options.speed,
complete: function() {
if (typeof callback === 'function' && !called) {
callback();
}
called = true;
}
}
);
},
setTimer: function() {
var self = this;
self.$window.on('scroll.singlePageNav', function() {
self.didScroll = true;
});
self.timer = setInterval(function() {
if (self.didScroll) {
self.didScroll = false;
self.checkPosition();
}
}, 250);
},
clearTimer: function() {
clearInterval(this.timer);
this.$window.off('scroll.singlePageNav');
this.didScroll = false;
},
// Check the scroll position and set the active section
checkPosition: function() {
var scrollPos = this.$window.scrollTop();
var currentSection = this.getCurrentSection(scrollPos);
this.setActiveLink(currentSection);
},
getCoords: function($elem) {
return {
top: Math.round($elem.offset().top) - this.options.offset
};
},
setActiveLink: function(href) {
var $activeLink = this.$container.find("a[href='" + href + "']");
if (!$activeLink.hasClass(this.options.currentClass)) {
this.$links.removeClass(this.options.currentClass);
$activeLink.addClass(this.options.currentClass);
}
},
getCurrentSection: function(scrollPos) {
var i, hash, coords, section;
for (i = 0; i < this.$links.length; i++) {
hash = this.$links[i].hash;
if ($(hash).length) {
coords = this.getCoords($(hash));
if (scrollPos >= coords.top - this.options.threshold) {
section = hash;
}
}
}
// The current section or the first link
return section || this.$links[0].hash;
}
};
$.fn.singlePageNav = function(options) {
return this.each(function() {
var singlePageNav = Object.create(SinglePageNav);
singlePageNav.init(options, this);
});
};
$.fn.singlePageNav.defaults = {
offset: 0,
threshold: 120,
speed: 400,
currentClass: 'current',
updateHash: false,
filter: '',
onComplete: false,
beforeStart: false
};
})(jQuery, window, document);
问题是你的 javascript 极大地改变了 single-page-nav 容器内的默认链接行为。它也将此javascript功能应用于您的外部链接，您不希望拥有这些外部链接以使它们正常工作。
- javascript 中
e.preventDefault();的位可防止浏览器正常处理单击事件。 - 为了解决您的问题，我将类
single-page-nav应用于ul（因为您的社交链接在此ul之外）并稍微调整您的 CSS。
就个人而言，我会像这样更改 CSS：
.topnav { ... }
.single-page-nav { ... }
.single-page-nav li { ... }
.topnav a { ... }
.topnav a:hover, .topnav .current { ... }