Tabbed content with all source in a single file - html

Question

Currently, I am using something like
<li class="active">Home</li>
<li>A</li>
<li>B</li>
<li>C</li>
where I have four html files index.html, a.html, b.html and c.html, which are selected based on the links clicked.
Instead, I want to have the content all in the same HTML file with common headers and footers and just selectively display content depending on which button was clicked.
How can I do that?

Answer 1

you can do this
put content of each page in div has unique id and display all none and each a in li have id of div
html
<li><a class="div1" href="#1">A</a></li>
<li><a class="div2" href="#2">B</a></li>
<li><a class="div3" href="#3">C</a></li>
<div id="1" class="hide" style=" width:100%; height: 100px; background-color:red; "></div>
<div id="2" class="hide" style=" width:100%; height: 100px; background-color:gold; "></div>
CSS
.hide
{
display:none;
}
JS
<script>
$(function () {
$('li').on('click', function (e) {
var href = $(this).find('a').attr('href');
window.location.hash = href;
});
$('.div1').on('click', function (e) {
$("#1").removeClass("hide");
$("#2").addClass("hide");
$("#3").addClass("hide");
});
$('.div2').on('click', function (e) {
$("#2").removeClass("hide");
$("#1").addClass("hide");
$("#3").addClass("hide");
});
$('.div3').on('click', function (e) {
$("#3").removeClass("hide");
$("#1").addClass("hide");
$("#2").addClass("hide");
});
if (window.location.hash == "#1") {
$("#1").removeClass("hide");
$("#3").addClass("hide");
$("#2").addClass("hide");
}
if (window.location.hash == "#2") {
$("#2").removeClass("hide");
$("#3").addClass("hide");
$("#1").addClass("hide");
}
if (window.location.hash == "#3") {
$("#3").removeClass("hide");
$("#1").addClass("hide");
$("#2").addClass("hide");
}
});
</script>