jquery - 防止 jQuery 链接跳转到页面顶部

Question

我创建了一个侧边栏菜单，其内容位于右侧。单击菜单项时，相关内容将替换当前内容。这工作正常，但是当它被点击时它会跳转到页面的顶部。我该如何防止这种情况？我只是想让它在不跳到顶部的情况下更改右侧的内容。

$(function() {
    var curPage="";
    $("#sidenav a").click(function() {
        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });

$("#link2, #link3, #link4, #link5, #link6, #link7, #link8").click(function(){
    $("#page1").hide();
});
});

#sidenav {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
  overflow-x: hidden;
  position: absolute;
  width: 310px;
}

#sidenav a {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  color: #818181;
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.7px;
  padding: 12px 8px 12px 24px;
  text-decoration: none;
}

#sidenav a:hover {
  background-color: rgba(0,0,0,0.05);
}

#sidenav a:focus {
  color: #009FE3;
}

#link1 {
  background-color: #009FE3;
  border-bottom: none !important;
  color: #fff !important;
  font-weight: 900 !important;
}

#link1:hover {
  background-color: #009FE3 !important;
  color: #fff !important;
}

/* Content */

.content {
  margin-left: 310px;
  padding: 20px 0px 40px 50px;
}

#page2, #page3, #page4, #page5, #page6, #page7, #page8 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidenav">
			<a class="link" id="link1" href="#" data-page="page1">About</a>
			<a class="link" id="link2" href="#" data-page="page2">Who We Are</a>
			<a class="link" id="link3" href="#" data-page="page3">The Future</a>
			<a class="link" id="link4" href="#" data-page="page4">Where We Are</a>
			<a class="link" id="link5" href="#" data-page="page5">Alliances, Approvals &amp; Memberships</a>
			<a class="link" id="link6" href="#" data-page="page6">Mechanical Handling Services</a>
			<a class="link" id="link7" href="#" data-page="page7">Technical Support</a>
			<a class="link" id="link8" href="#" data-page="page8">Training Services</a>
		</div>

		<div class="content" id="page1">
			<!--<div class="head-image"></div>-->
			<h2>About NSL</h2>
			<p>NSL have been providing technical expertise and training to the lifting industry for over 25 years. During these years we have developed a global network of experienced specialists working on-site and at training centres in key locations worldwide. This enables NSL to provide an unrivalled service offering technical advice, assistance, assessment, training and mentoring whenever and wherever you need it.</p>
			<p>This experience has also translated into the development of a wide range of supporting materials; handbooks; slide packs; training manuals; computer based learning tools; posters; and videos, all of which are regularly updated in accordance with changing legislation and working practices.</p>
		</div>

		<div class="content" id="page2">
			<h2>Who We Are</h2>
			<p>For over 25 years NSL have been considered to be the leading provider of Training Services and Teaching Documents to the majority of International Oil Operators, Service Companies and Major Contractors worldwide.</p>
			<p>Our success is due to sticking to what we are best at and doing it well. We liaise with Government Health and Safety Departments internationally and produce user-friendly procedural documents, training aids and training courses to help companies comply with legislation, regulations and industry safety standards.</p>
			<p>The safety culture in the Oil &amp; Gas Industry is a very important issue, and our services are increasingly in demand overseas. We regularly supply training to all of the high activity global oil regions. In addition to training and onsite coaching at our clients’ facilities, we also operate training centres in various international locations.</p>
			<p>We translate all our products into various languages to reflect the geographical locations of oil and gas exploration and production. All our products and services as a minimum, meet legislative, regulatory and industry requirements but tend to set a lot higher standard as expected by the oil and gas industry.</p>
			<p>With the majority of our products translated into the popular languages of the oilfield such as American English, English, Spanish, Portuguese, Russian and Arabic, it has enabled us to deliver training and supply safety-training material, to over 35 countries.</p>
		</div>

		<div class="content" id="page3">
			<h2>Future</h2>
			<p>The changes and growth of communication technology over the last 10 years has been fast and furious, and shows no signs of slowing. Overhead projectors, “dial-up” Internet access, even stamps these days have been confined to the back of our relics cupboard. We now have the storage capacity on a pocket USB pen-drive that we once had on a whole office network. And it does not seem terribly long ago that mobile phones, email and browsing the net were a novelty for us all. Now, imagine surviving just a week without these technologies. Peaceful, yes; productive, no!</p>
			<p>Keeping a globally deployed workforce up-to-date with the latest safety information, and trained to the highest possible standards has always been logistically difficult and a substantial financial burden. Training content deployed via the Internet and other digital technologies makes instant access to training, possible, easy and very cost effective. Most importantly, employees working locally, offshore or located overseas can now all gain the same real-time instant access to high quality training materials whenever it’s required. And all this can all be managed electronically from one administrative location; keeping training records up to date, safe and accessible.</p>
			<p>Twenty years on, the company has earned an enviable reputation internationally for consistently delivering training products & materials, and training services of the highest quality.</p>
		</div>

Answer 1

使用preventdefault()

$(function() {
    var curPage="";
    $("#sidenav a").click(function(event) {
        event.preventDefault();
        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).show();
    });

$("#link2, #link3, #link4, #link5, #link6, #link7, #link8").click(function(){
    $("#page1").hide();
});
});