我使用以下内容：
<a href="#tab1">Personal Detail</a>
从一个标签导航到另一个标签。但是，每当我点击此页面时，页面就会跳起来。我没有使用javascript并使用CSS来定义选项卡。我不确定如何避免这个
article.tabs {
position: relative;
display: block;
width: 60em;
height: 20em;
margin: 2em;
}
article.tabs section {
position: absolute;
display: block;
top: 1.5em;
left: 0;
height: 45em;
width: 1050px;
padding: 10px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
z-index: 0;
}
article.tabs section:first-child {
z-index: 1;
}
article.tabs section h2 {
position: absolute;
font-size: 1em;
font-weight: normal;
width: auto;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 {
left: 110px;
}
article.tabs section:nth-child(3) h2 {
left: 222px;
}
article.tabs section:nth-child(4) h2 {
left: 313px;
}
article.tabs section:nth-child(5) h2 {
left: 411px;
}
article.tabs section:nth-child(6) h2 {
left: 522px;
}
article.tabs section h2 a {
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2 {
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>add_staff</title>
<link rel="stylesheet" type="text/css" href="css/add_staff.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<form action="new_staff.php" method="POST">
<article class="tabs">
<section id="tab1">
<h2><a href="#tab1">Personal Detail</a></h2>
<p class="tabnav" align="right">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Staff image" style="border: 2px solid ; width: 165px; height: 200px;" align="left" vspace="10">
<div class="form-group">
<label for="stafftitle">Title</label>
<select name="stafftitle" required>
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Master">Master</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
<label for="stafffname">Firstname</label>
<input name="stafffname" placeholder="First name" required>
<label for="staffsname">Surname</label>
<input name="staffsname" placeholder="Surname" required>
<br><br>
<label for="staffgender">Gender</label>
<select name="staffgender" required>
<option value="">Please select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="X">Mx</option>
</select>
<label for="staffmname">Middlename</label>
<input name="staffmname" placeholder="Middlename">
<label for="staffage">Age(yrs)</label>
<input name="staffage" type="number" placeholder="Age in years" required>
<br><br>
<label for="staffpemail">Email Address(Personal)</label>
<input name="staffpemail" type="email" placeholder="Personal email address" size="35" required>
<label for="staffdob">Birthdate</label>
<input type="date" name="staffdob" required>
<br><br>
<label for="staffwemail">Email Address(Work)</label>
<input name="staffwemail" type="email" placeholder="Work email address" size="35" required>
<label for="staffhphone">Homephone</label>
<input size="" type="number" name="staff_contact[]">
<br>
<br>
<label for="staffmobile">Mobile</label>
<input name="staff_contact[]" placeholder="Mobile" type="number" required>
<label for="staffheight">Height(cm)</label></small>
<input name="staffheight" type="number" placeholder="Height in cm" size="12" required>
<label for="staffweight">Weight(kg)</label>
<input name="staffweight" min="10" max="10000000" type="number" placeholder="Weight in Kg" required>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" aria-hidden="true"></i></i> Upload Photo </label>
<input id="file-upload" name="staffphoto" type="file" accept=".JPG" />
<br>
<label for="staffrel">Religion</label>
<input type="text" name="staffrel" />
<label for="staffblgrp">Blood Group</label>
<select name="staffblgrp" required>
<option value="">Please select...</option>
<option value="A+">A+ve</option>
<option value="B+">B+ve</option>
<option value="AB+">AB+ve</option>
<option value="O+">O+ve</option>
<option value="A-">A-ve</option>
<option value="B-">B-ve</option>
<option value="AB-">AB-ve</option>
<option value="O-">O-ve</option>
</select>
<label for="staffnatn">Nationality</label>
<select name="stunatn" required>
<option value="">Please select...</option>
<option value="afghan">Afghan</option>
<option value="albanian">Albanian</option>
<option value="algerian">Algerian</option>
<option value="american">American</option>
<option value="andorran">Andorran</option>
<option value="angolan">Angolan</option>
<option value="antiguans">Antiguans</option>
<option value="argentinean">Argentinean</option>
<option value="armenian">Armenian</option>
<option value="australian">Australian</option>
<option value="austrian">Austrian</option>
<option value="azerbaijani">Azerbaijani</option>
<option value="bahamian">Bahamian</option>
<option value="bahraini">Bahraini</option>
<option value="bangladeshi">Bangladeshi</option>
<option value="barbadian">Barbadian</option>
<option value="barbudans">Barbudans</option>
<option value="batswana">Batswana</option>
<option value="belarusian">Belarusian</option>
<option value="belgian">Belgian</option>
<option value="belizean">Belizean</option>
<option value="beninese">Beninese</option>
<option value="bhutanese">Bhutanese</option>
<option value="bolivian">Bolivian</option>
<option value="bosnian">Bosnian</option>
<option value="brazilian">Brazilian</option>
<option value="british">British</option>
<option value="bruneian">Bruneian</option>
<option value="bulgarian">Bulgarian</option>
<option value="burkinabe">Burkinabe</option>
<option value="burmese">Burmese</option>
<option value="burundian">Burundian</option>
<option value="cambodian">Cambodian</option>
<option value="cameroonian">Cameroonian</option>
<option value="canadian">Canadian</option>
<option value="cape verdean">Cape Verdean</option>
<option value="central african">Central African</option>
<option value="chadian">Chadian</option>
<option value="chilean">Chilean</option>
<option value="chinese">Chinese</option>
<option value="colombian">Colombian</option>
<option value="comoran">Comoran</option>
<option value="congolese">Congolese</option>
<option value="costa rican">Costa Rican</option>
<option value="croatian">Croatian</option>
<option value="cuban">Cuban</option>
<option value="cypriot">Cypriot</option>
<option value="czech">Czech</option>
<option value="danish">Danish</option>
<option value="djibouti">Djibouti</option>
<option value="dominican">Dominican</option>
<option value="dutch">Dutch</option>
<option value="east timorese">East Timorese</option>
<option value="ecuadorean">Ecuadorean</option>
<option value="egyptian">Egyptian</option>
<option value="emirian">Emirian</option>
<option value="equatorial guinean">Equatorial Guinean</option>
<option value="eritrean">Eritrean</option>
<option value="estonian">Estonian</option>
<option value="ethiopian">Ethiopian</option>
<option value="fijian">Fijian</option>
<option value="filipino">Filipino</option>
<option value="finnish">Finnish</option>
<option value="french">French</option>
<option value="gabonese">Gabonese</option>
<option value="gambian">Gambian</option>
<option value="georgian">Georgian</option>
<option value="german">German</option>
<option value="ghanaian">Ghanaian</option>
<option value="greek">Greek</option>
<option value="grenadian">Grenadian</option>
<option value="guatemalan">Guatemalan</option>
<option value="guinea-bissauan">Guinea-Bissauan</option>
<option value="guinean">Guinean</option>
<option value="guyanese">Guyanese</option>
<option value="haitian">Haitian</option>
<option value="herzegovinian">Herzegovinian</option>
<option value="honduran">Honduran</option>
<option value="hungarian">Hungarian</option>
<option value="icelander">Icelander</option>
<option value="indian">Indian</option>
<option value="indonesian">Indonesian</option>
<option value="iranian">Iranian</option>
<option value="iraqi">Iraqi</option>
<option value="irish">Irish</option>
<option value="israeli">Israeli</option>
<option value="italian">Italian</option>
<option value="ivorian">Ivorian</option>
<option value="jamaican">Jamaican</option>
<option value="japanese">Japanese</option>
<option value="jordanian">Jordanian</option>
<option value="kazakhstani">Kazakhstani</option>
<option value="kenyan">Kenyan</option>
<option value="kittian and nevisian">Kittian and Nevisian</option>
<option value="kuwaiti">Kuwaiti</option>
<option value="kyrgyz">Kyrgyz</option>
<option value="laotian">Laotian</option>
<option value="latvian">Latvian</option>
<option value="lebanese">Lebanese</option>
<option value="liberian">Liberian</option>
<option value="libyan">Libyan</option>
<option value="liechtensteiner">Liechtensteiner</option>
<option value="lithuanian">Lithuanian</option>
<option value="luxembourger">Luxembourger</option>
<option value="macedonian">Macedonian</option>
<option value="malagasy">Malagasy</option>
<option value="malawian">Malawian</option>
<option value="malaysian">Malaysian</option>
<option value="maldivan">Maldivan</option>
<option value="malian">Malian</option>
<option value="maltese">Maltese</option>
<option value="marshallese">Marshallese</option>
<option value="mauritanian">Mauritanian</option>
<option value="mauritian">Mauritian</option>
<option value="mexican">Mexican</option>
<option value="micronesian">Micronesian</option>
<option value="moldovan">Moldovan</option>
<option value="monacan">Monacan</option>
<option value="mongolian">Mongolian</option>
<option value="moroccan">Moroccan</option>
<option value="mosotho">Mosotho</option>
<option value="motswana">Motswana</option>
<option value="mozambican">Mozambican</option>
<option value="namibian">Namibian</option>
<option value="nauruan">Nauruan</option>
<option value="nepalese">Nepalese</option>
<option value="new zealander">New Zealander</option>
<option value="ni-vanuatu">Ni-Vanuatu</option>
<option value="nicaraguan">Nicaraguan</option>
<option value="nigerien">Nigerien</option>
<option value="north korean">North Korean</option>
<option value="northern irish">Northern Irish</option>
<option value="norwegian">Norwegian</option>
<option value="omani">Omani</option>
<option value="pakistani">Pakistani</option>
<option value="palauan">Palauan</option>
<option value="panamanian">Panamanian</option>
<option value="papua new guinean">Papua New Guinean</option>
<option value="paraguayan">Paraguayan</option>
<option value="peruvian">Peruvian</option>
<option value="polish">Polish</option>
<option value="portuguese">Portuguese</option>
<option value="qatari">Qatari</option>
<option value="romanian">Romanian</option>
<option value="russian">Russian</option>
<option value="rwandan">Rwandan</option>
<option value="saint lucian">Saint Lucian</option>
<option value="salvadoran">Salvadoran</option>
<option value="samoan">Samoan</option>
<option value="san marinese">San Marinese</option>
<option value="sao tomean">Sao Tomean</option>
<option value="saudi">Saudi</option>
<option value="scottish">Scottish</option>
<option value="senegalese">Senegalese</option>
<option value="serbian">Serbian</option>
<option value="seychellois">Seychellois</option>
<option value="sierra leonean">Sierra Leonean</option>
<option value="singaporean">Singaporean</option>
<option value="slovakian">Slovakian</option>
<option value="slovenian">Slovenian</option>
<option value="solomon islander">Solomon Islander</option>
<option value="somali">Somali</option>
<option value="south african">South African</option>
<option value="south korean">South Korean</option>
<option value="spanish">Spanish</option>
<option value="sri lankan">Sri Lankan</option>
<option value="sudanese">Sudanese</option>
<option value="surinamer">Surinamer</option>
<option value="swazi">Swazi</option>
<option value="swedish">Swedish</option>
<option value="swiss">Swiss</option>
<option value="syrian">Syrian</option>
<option value="taiwanese">Taiwanese</option>
<option value="tajik">Tajik</option>
<option value="tanzanian">Tanzanian</option>
<option value="thai">Thai</option>
<option value="togolese">Togolese</option>
<option value="tongan">Tongan</option>
<option value="trinidadian or tobagonian">Trinidadian or Tobagonian</option>
<option value="tunisian">Tunisian</option>
<option value="turkish">Turkish</option>
<option value="tuvaluan">Tuvaluan</option>
<option value="ugandan">Ugandan</option>
<option value="ukrainian">Ukrainian</option>
<option value="uruguayan">Uruguayan</option>
<option value="uzbekistani">Uzbekistani</option>
<option value="venezuelan">Venezuelan</option>
<option value="vietnamese">Vietnamese</option>
<option value="welsh">Welsh</option>
<option value="yemenite">Yemenite</option>
<option value="zambian">Zambian</option>
<option value="zimbabwean">Zimbabwean</option>
</select>
<label for="staffcategory">Staff Category</label>
<select name="staffcategory" required>
<option value="">Please select...</option>
<option value="Principal">Principal</option>
<option value="Teacher">Teacher</option>
<option value="Administrator">Administrator</option>
<option value="General">General Staff</option>
</select>
</div>
<fieldset style="text-align:left">
<legend><i class="fa fa-home" aria-hidden="true"></i> Address Details</legend>
<label for="staffadd1">Address Line 1</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd2">Address Line 2</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd3">Address Line 3</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcity">City</label>
<input type="text" name="staff_contact[]" />
<label for="staffstate">State</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcountry">Country</label>
<input type="text" name="staff_contact[]" />
<label for="staffpcode">Pincode</label>
<input type="text" name="staff_contact[]" />
</fieldset>
<br><br>
<div style="text-align:right">
<input name="staff_petails_submit" type="submit" value="Save">
<a href="#tab2"><button>Next ››</button></a></p>
</div>
</section>
<section id="tab2">
<fieldset>
<h2><a href="#tab2">Qualification and Work Experience Details</a></h2>
<fieldset>
<legend><i class="fa fa-graduation-cap" aria-hidden="true"></i>Qualification Details</legend>
<table border="2px" width="950px">
<tr>
<td>Particulars</td>
<td>School/College Name</td>
<td>Marks/CGPA Obtained</td>
<td>Year of Passing</td>
</tr>
<tr>
<td>10th Class</td>
<td><input name="staff_10sname" type="text"></td>
<td><input name="staff_10marks" type="text"></td>
<td><input name="staff_10pyear" type="text"></td>
</tr>
<tr>
<td>12th Class</td>
<td><input name="staff_12sname" type="text"></td>
<td><input name="staff_12marks" type="text"></td>
<td><input name="staff_12pyear" type="text"></td>
</tr>
<tr>
<td>Graduation</td>
<td><input name="staff_gsname" type="text"></td>
<td><input name="staff_gmarks" type="text"></td>
<td><input name="staff_gpyear" type="text"></td>
</tr>
<tr>
<td>Post Graduation</td>
<td><input name="staff_pgsname" type="text"></td>
<td><input name="staff_pgmarks" type="text"></td>
<td><input name="staff_pgpyear" type="text"></td>
</tr>
<tr>
<td>Professional Qualification</td>
<td><input name="staff_pqsname" type="text"></td>
<td><input name="staff_pqmarks" type="text"></td>
<td><input name="staff_pqpyear" type="text"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><i class="fa fa-industry" aria-hidden="true"></i>Work Experience</legend>
<table border="2px" width="950px">
<tr>
<td>School/Company Name</td>
<td>Date of Joining</td>
<td>Date of Leaving</td>
<td>Designation</td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
</table>
</fieldset>
<p class="tabnav" align="right"><a href="#tab1"><button>‹‹ Back</button></a>
<input name="staff_qedetails_submit" type="submit" value="Submit">
</fieldset>
</section>
</article>
</form>
</body>
</html>
答案 0 :(得分：1)
一种解决方法是在元素之前使用锚点来定位并设置在固定位置 basicly：
<a id="mytarget></a>
<div>the container to style</div>
和
#mytarget {position:fixed;/* coordonates might if neede */}
#mytarget + div {/* style to apply */ }
您的代码添加的示例：
2个锚点采用部分ID
1 css选择器/规则
修改2个选择器
article.tabs {
position: relative;
display: block;
width: 60em;
height: 20em;
margin: 2em;
}
article.tabs section {
position: absolute;
display: block;
top: 1.5em;
left: 0;
height: 45em;
width: 1050px;
padding: 10px 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
z-index: 0;
}
article.tabs section:first-child {
z-index: 1;
}
article.tabs section h2 {
position: absolute;
font-size: 1em;
font-weight: normal;
width: auto;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 {
left: 110px;
}
article.tabs section:nth-child(3) h2 {
left: 222px;
}
article.tabs section:nth-child(4) h2 {
left: 313px;
}
article.tabs section:nth-child(5) h2 {
left: 411px;
}
article.tabs section:nth-child(6) h2 {
left: 522px;
}
article.tabs section h2 a {
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
a[id] {position:fixed}
article.tabs a:target + section ,
article.tabs a:target + section h2 {
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2 {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>add_staff</title>
<link rel="stylesheet" type="text/css" href="css/add_staff.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<form action="new_staff.php" method="POST">
<article class="tabs">
<a id="tab1"></a>
<section>
<h2><a href="#tab1">Personal Detail</a></h2>
<p class="tabnav" align="right">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Staff image" style="border: 2px solid ; width: 165px; height: 200px;" align="left" vspace="10">
<div class="form-group">
<label for="stafftitle">Title</label>
<select name="stafftitle" required>
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Master">Master</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
</select>
<label for="stafffname">Firstname</label>
<input name="stafffname" placeholder="First name" required>
<label for="staffsname">Surname</label>
<input name="staffsname" placeholder="Surname" required>
<br><br>
<label for="staffgender">Gender</label>
<select name="staffgender" required>
<option value="">Please select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
<option value="X">Mx</option>
</select>
<label for="staffmname">Middlename</label>
<input name="staffmname" placeholder="Middlename">
<label for="staffage">Age(yrs)</label>
<input name="staffage" type="number" placeholder="Age in years" required>
<br><br>
<label for="staffpemail">Email Address(Personal)</label>
<input name="staffpemail" type="email" placeholder="Personal email address" size="35" required>
<label for="staffdob">Birthdate</label>
<input type="date" name="staffdob" required>
<br><br>
<label for="staffwemail">Email Address(Work)</label>
<input name="staffwemail" type="email" placeholder="Work email address" size="35" required>
<label for="staffhphone">Homephone</label>
<input size="" type="number" name="staff_contact[]">
<br>
<br>
<label for="staffmobile">Mobile</label>
<input name="staff_contact[]" placeholder="Mobile" type="number" required>
<label for="staffheight">Height(cm)</label>
<input name="staffheight" type="number" placeholder="Height in cm" size="12" required>
<label for="staffweight">Weight(kg)</label>
<input name="staffweight" min="10" max="10000000" type="number" placeholder="Weight in Kg" required>
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload" aria-hidden="true"></i> Upload Photo </label>
<input id="file-upload" name="staffphoto" type="file" accept=".JPG" />
<br>
<label for="staffrel">Religion</label>
<input type="text" name="staffrel" />
<label for="staffblgrp">Blood Group</label>
<select name="staffblgrp" required>
<option value="">Please select...</option>
<option value="A+">A+ve</option>
<option value="B+">B+ve</option>
<option value="AB+">AB+ve</option>
<option value="O+">O+ve</option>
<option value="A-">A-ve</option>
<option value="B-">B-ve</option>
<option value="AB-">AB-ve</option>
<option value="O-">O-ve</option>
</select>
<label for="staffnatn">Nationality</label>
<select name="stunatn" required>
<option value="">Please select...</option>
<option value="afghan">Afghan</option>
<option value="albanian">Albanian</option>
<option value="algerian">Algerian</option>
<option value="american">American</option>
<option value="andorran">Andorran</option>
<option value="angolan">Angolan</option>
<option value="antiguans">Antiguans</option>
<option value="argentinean">Argentinean</option>
<option value="armenian">Armenian</option>
<option value="australian">Australian</option>
<option value="austrian">Austrian</option>
<option value="azerbaijani">Azerbaijani</option>
<option value="bahamian">Bahamian</option>
<option value="bahraini">Bahraini</option>
<option value="bangladeshi">Bangladeshi</option>
<option value="barbadian">Barbadian</option>
<option value="barbudans">Barbudans</option>
<option value="batswana">Batswana</option>
<option value="belarusian">Belarusian</option>
<option value="belgian">Belgian</option>
<option value="belizean">Belizean</option>
<option value="beninese">Beninese</option>
<option value="bhutanese">Bhutanese</option>
<option value="bolivian">Bolivian</option>
<option value="bosnian">Bosnian</option>
<option value="brazilian">Brazilian</option>
<option value="british">British</option>
<option value="bruneian">Bruneian</option>
<option value="bulgarian">Bulgarian</option>
<option value="burkinabe">Burkinabe</option>
<option value="burmese">Burmese</option>
<option value="burundian">Burundian</option>
<option value="cambodian">Cambodian</option>
<option value="cameroonian">Cameroonian</option>
<option value="canadian">Canadian</option>
<option value="cape verdean">Cape Verdean</option>
<option value="central african">Central African</option>
<option value="chadian">Chadian</option>
<option value="chilean">Chilean</option>
<option value="chinese">Chinese</option>
<option value="colombian">Colombian</option>
<option value="comoran">Comoran</option>
<option value="congolese">Congolese</option>
<option value="costa rican">Costa Rican</option>
<option value="croatian">Croatian</option>
<option value="cuban">Cuban</option>
<option value="cypriot">Cypriot</option>
<option value="czech">Czech</option>
<option value="danish">Danish</option>
<option value="djibouti">Djibouti</option>
<option value="dominican">Dominican</option>
<option value="dutch">Dutch</option>
<option value="east timorese">East Timorese</option>
<option value="ecuadorean">Ecuadorean</option>
<option value="egyptian">Egyptian</option>
<option value="emirian">Emirian</option>
<option value="equatorial guinean">Equatorial Guinean</option>
<option value="eritrean">Eritrean</option>
<option value="estonian">Estonian</option>
<option value="ethiopian">Ethiopian</option>
<option value="fijian">Fijian</option>
<option value="filipino">Filipino</option>
<option value="finnish">Finnish</option>
<option value="french">French</option>
<option value="gabonese">Gabonese</option>
<option value="gambian">Gambian</option>
<option value="georgian">Georgian</option>
<option value="german">German</option>
<option value="ghanaian">Ghanaian</option>
<option value="greek">Greek</option>
<option value="grenadian">Grenadian</option>
<option value="guatemalan">Guatemalan</option>
<option value="guinea-bissauan">Guinea-Bissauan</option>
<option value="guinean">Guinean</option>
<option value="guyanese">Guyanese</option>
<option value="haitian">Haitian</option>
<option value="herzegovinian">Herzegovinian</option>
<option value="honduran">Honduran</option>
<option value="hungarian">Hungarian</option>
<option value="icelander">Icelander</option>
<option value="indian">Indian</option>
<option value="indonesian">Indonesian</option>
<option value="iranian">Iranian</option>
<option value="iraqi">Iraqi</option>
<option value="irish">Irish</option>
<option value="israeli">Israeli</option>
<option value="italian">Italian</option>
<option value="ivorian">Ivorian</option>
<option value="jamaican">Jamaican</option>
<option value="japanese">Japanese</option>
<option value="jordanian">Jordanian</option>
<option value="kazakhstani">Kazakhstani</option>
<option value="kenyan">Kenyan</option>
<option value="kittian and nevisian">Kittian and Nevisian</option>
<option value="kuwaiti">Kuwaiti</option>
<option value="kyrgyz">Kyrgyz</option>
<option value="laotian">Laotian</option>
<option value="latvian">Latvian</option>
<option value="lebanese">Lebanese</option>
<option value="liberian">Liberian</option>
<option value="libyan">Libyan</option>
<option value="liechtensteiner">Liechtensteiner</option>
<option value="lithuanian">Lithuanian</option>
<option value="luxembourger">Luxembourger</option>
<option value="macedonian">Macedonian</option>
<option value="malagasy">Malagasy</option>
<option value="malawian">Malawian</option>
<option value="malaysian">Malaysian</option>
<option value="maldivan">Maldivan</option>
<option value="malian">Malian</option>
<option value="maltese">Maltese</option>
<option value="marshallese">Marshallese</option>
<option value="mauritanian">Mauritanian</option>
<option value="mauritian">Mauritian</option>
<option value="mexican">Mexican</option>
<option value="micronesian">Micronesian</option>
<option value="moldovan">Moldovan</option>
<option value="monacan">Monacan</option>
<option value="mongolian">Mongolian</option>
<option value="moroccan">Moroccan</option>
<option value="mosotho">Mosotho</option>
<option value="motswana">Motswana</option>
<option value="mozambican">Mozambican</option>
<option value="namibian">Namibian</option>
<option value="nauruan">Nauruan</option>
<option value="nepalese">Nepalese</option>
<option value="new zealander">New Zealander</option>
<option value="ni-vanuatu">Ni-Vanuatu</option>
<option value="nicaraguan">Nicaraguan</option>
<option value="nigerien">Nigerien</option>
<option value="north korean">North Korean</option>
<option value="northern irish">Northern Irish</option>
<option value="norwegian">Norwegian</option>
<option value="omani">Omani</option>
<option value="pakistani">Pakistani</option>
<option value="palauan">Palauan</option>
<option value="panamanian">Panamanian</option>
<option value="papua new guinean">Papua New Guinean</option>
<option value="paraguayan">Paraguayan</option>
<option value="peruvian">Peruvian</option>
<option value="polish">Polish</option>
<option value="portuguese">Portuguese</option>
<option value="qatari">Qatari</option>
<option value="romanian">Romanian</option>
<option value="russian">Russian</option>
<option value="rwandan">Rwandan</option>
<option value="saint lucian">Saint Lucian</option>
<option value="salvadoran">Salvadoran</option>
<option value="samoan">Samoan</option>
<option value="san marinese">San Marinese</option>
<option value="sao tomean">Sao Tomean</option>
<option value="saudi">Saudi</option>
<option value="scottish">Scottish</option>
<option value="senegalese">Senegalese</option>
<option value="serbian">Serbian</option>
<option value="seychellois">Seychellois</option>
<option value="sierra leonean">Sierra Leonean</option>
<option value="singaporean">Singaporean</option>
<option value="slovakian">Slovakian</option>
<option value="slovenian">Slovenian</option>
<option value="solomon islander">Solomon Islander</option>
<option value="somali">Somali</option>
<option value="south african">South African</option>
<option value="south korean">South Korean</option>
<option value="spanish">Spanish</option>
<option value="sri lankan">Sri Lankan</option>
<option value="sudanese">Sudanese</option>
<option value="surinamer">Surinamer</option>
<option value="swazi">Swazi</option>
<option value="swedish">Swedish</option>
<option value="swiss">Swiss</option>
<option value="syrian">Syrian</option>
<option value="taiwanese">Taiwanese</option>
<option value="tajik">Tajik</option>
<option value="tanzanian">Tanzanian</option>
<option value="thai">Thai</option>
<option value="togolese">Togolese</option>
<option value="tongan">Tongan</option>
<option value="trinidadian or tobagonian">Trinidadian or Tobagonian</option>
<option value="tunisian">Tunisian</option>
<option value="turkish">Turkish</option>
<option value="tuvaluan">Tuvaluan</option>
<option value="ugandan">Ugandan</option>
<option value="ukrainian">Ukrainian</option>
<option value="uruguayan">Uruguayan</option>
<option value="uzbekistani">Uzbekistani</option>
<option value="venezuelan">Venezuelan</option>
<option value="vietnamese">Vietnamese</option>
<option value="welsh">Welsh</option>
<option value="yemenite">Yemenite</option>
<option value="zambian">Zambian</option>
<option value="zimbabwean">Zimbabwean</option>
</select>
<label for="staffcategory">Staff Category</label>
<select name="staffcategory" required>
<option value="">Please select...</option>
<option value="Principal">Principal</option>
<option value="Teacher">Teacher</option>
<option value="Administrator">Administrator</option>
<option value="General">General Staff</option>
</select>
</div>
<fieldset style="text-align:left">
<legend><i class="fa fa-home" aria-hidden="true"></i> Address Details</legend>
<label for="staffadd1">Address Line 1</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd2">Address Line 2</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffadd3">Address Line 3</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcity">City</label>
<input type="text" name="staff_contact[]" />
<label for="staffstate">State</label>
<input type="text" name="staff_contact[]" />
<br><br>
<label for="staffcountry">Country</label>
<input type="text" name="staff_contact[]" />
<label for="staffpcode">Pincode</label>
<input type="text" name="staff_contact[]" />
</fieldset>
<br><br>
<div style="text-align:right">
<input name="staff_petails_submit" type="submit" value="Save">
<a href="#tab2"><button>Next ››</button></a>
</div>
</section>
<a id="tab2"></a>
<section>
<fieldset>
<h2><a href="#tab2">Qualification and Work Experience Details</a></h2>
<fieldset>
<legend><i class="fa fa-graduation-cap" aria-hidden="true"></i>Qualification Details</legend>
<table border="2px" width="950px">
<tr>
<td>Particulars</td>
<td>School/College Name</td>
<td>Marks/CGPA Obtained</td>
<td>Year of Passing</td>
</tr>
<tr>
<td>10th Class</td>
<td><input name="staff_10sname" type="text"></td>
<td><input name="staff_10marks" type="text"></td>
<td><input name="staff_10pyear" type="text"></td>
</tr>
<tr>
<td>12th Class</td>
<td><input name="staff_12sname" type="text"></td>
<td><input name="staff_12marks" type="text"></td>
<td><input name="staff_12pyear" type="text"></td>
</tr>
<tr>
<td>Graduation</td>
<td><input name="staff_gsname" type="text"></td>
<td><input name="staff_gmarks" type="text"></td>
<td><input name="staff_gpyear" type="text"></td>
</tr>
<tr>
<td>Post Graduation</td>
<td><input name="staff_pgsname" type="text"></td>
<td><input name="staff_pgmarks" type="text"></td>
<td><input name="staff_pgpyear" type="text"></td>
</tr>
<tr>
<td>Professional Qualification</td>
<td><input name="staff_pqsname" type="text"></td>
<td><input name="staff_pqmarks" type="text"></td>
<td><input name="staff_pqpyear" type="text"></td>
</tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><i class="fa fa-industry" aria-hidden="true"></i>Work Experience</legend>
<table border="2px" width="950px">
<tr>
<td>School/Company Name</td>
<td>Date of Joining</td>
<td>Date of Leaving</td>
<td>Designation</td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
<tr>
<td><input name="pscname[]" type="text"></td>
<td><input name="pdoj[]" type="date"></td>
<td><input name="pdol[]" type="date"></td>
<td><input name="pdesignation[]" type="text"></td>
</tr>
</table>
</fieldset>
<p class="tabnav" align="right"><a href="#tab1"><button>‹‹ Back</button></a>
<input name="staff_qedetails_submit" type="submit" value="Submit">
</fieldset>
</section>
</article>
</form>
</body>
</html>
使用固定的锚点打破正常和有用的行为，这会带来目标内容。来自外部链接，表单可能不会被看到，访问者将不得不猜测他想去哪里看看:)
答案 1 :(得分：-1)
试试这个，看看你是怎么过的。这是一个有效的JSFiddle。
为您添加ID链接，例如#link。
<a href="#tab1" id="link">Tab 1</a>
然后在<script></script>标记内的HTML底部添加此内容。
document.getElementById('link').onclick = function(e) {
e.preventDefault();
}
这样做会在单击元素#link时运行此功能，告诉浏览器 阻止默认行为 ，在此因为它是一个链接，所以它说不要打开链接。
这是纯JavaScript，所以不要担心添加库或额外的插件等等。它应该自己工作。看看你如何继续下去。