Stop page jump to an anchor tag (without javascript?)
HTML
<div id="fixed-area">
<ul id="tab">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
<div id="body-tab">
<div class="box" id="tab1">
<h2>Tab 1</h2>
</div>
<div class="box" id="tab2">
<h2>Tab 2</h2>
</div>
<div class="box" id="tab3">
<h2>Tab 3</h2>
</div>
<div class="box" id="tab4">
<h2>Tab 4</h2>
</div>
</div>
<button class="btn" onclick="window.location.href=https://www.google.co.in">Tab 11
</div>
CSS
body {height:1000px;}
#fixed-area {
position:fixed;
top:30px;
left:5%;
}
ul#tab {
width:350px;
overflow:hidden;
}
ul#tab li {
display:inline;
float:left;
margin:0px 2px 2px 0px;
}
ul#tab li a {
background-color:black;
color:white;
padding:5px 10px;
font:bold 11px Verdana,Arial,Sans-Serif;
text-decoration:none;
display:block;
}
#body-tab {position:relative;width:350px;}
#body-tab .box {
position:absolute;
top:0px;
left:0px;
width:90%;
height:200px;
padding:5%;
background-color:skyblue;
font:bold 14px Georgia,Serif;
color:black;
opacity:0;
height:0px;
visibility:hidden;
-webkit-transition:all 0.26s ease-out;
-moz-transition:all 0.26s ease-out;
-ms-transition:all 0.26s ease-out;
-o-transition:all 0.26s ease-out;
transition:all 0.26s ease-out;
}
#body-tab .box:target {
visibility:visible;
height:200px;
opacity:1;
}
JavaScript
// Stop the page jump to an anchor tag (without javascript?)