Jigna Jain
Reputation: 255
Stop page from jumping up when clicking on tab
I am using the following :
<a href="#tab1">Personal Detail</a>
to navigate from one tab to another. However whenever I click on this the page jumps up. I am not using javascript and using CSS to define tabs. I am not sure how to avoid this
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>Upvotes: 1
Views: 129
Answers (1)
G-Cyrillus
Reputation: 105903
One work around is to use an anchor just before the element to target and set in fixed position basicly:
<a id="mytarget></a>
<div>the container to style</div>
and
#mytarget {position:fixed;/* coordonates might if neede */}
#mytarget + div {/* style to apply */ }
example made from your code adding :
2 anchors taking sections ids
1 css selector/rule
modifying 2 selectors
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>Mind this.
using a fixed anchors breaks the normal and usefull behavior, that brings to sight content targeted. Coming from an external link, the form might not be seen and visitor will have to guess where he is suppose to go and look at :)
Upvotes: 1
Related Questions
- Tabs Jumping when clicked
- How to prevent auto scrolling when click tab
- Stop jquery TABS from jumping / scrolling up when clicked on?
- Prevent page jump on tab click JS
- Pure CSS tabs - Prevent scroll to page top on tab change
- Stop jquery tabs from moving to the top of the page
- How to stop page going to top when clicking different tabs in jquery vertical tab
- jQuery tabs, jumping to top of page, how to stop?
- Jumping down in HTML when clicking onto a tab
- skip focus from TAB jump