library_books<div class="tabs">
<div class="tablinks">
  <button class="tablink active" data-tab="t1">Tab 1</button>
  <button class="tablink" data-tab="t2">Tab 2</button>
  <button class="tablink" data-tab="t3">Tab 3</button>
</div>
<div id="t1" class="tabcontent active">
  <h1>Tab 1</h1>
  <p>Your Tab 1 content.....!</p>
</div>
<div id="t2" class="tabcontent">
  <h1>Tab 2</h1>
  <p>Your Tab 2 content.....!</p>
</div>
<div id="t3" class="tabcontent">
  <h1>Tab 3</h1>
  <p>Your Tab 3 content.....!</p>
</div>
</div>

library_books<style>
*{box-sizing:border-box;}
.tabs {
  width:100%;   /*set the width of the tabs */
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
div.tablinks {
  overflow: hidden;
  background-color: #f1f1f1;
}
button.tablink {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:33.33%;
}
.tablink:hover {
  background-color: #f8bbd0;
}
.tablink.active {
  background-color: #f48fb1;
  color: white;
}
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #e0e0e0;
  height:250px;
  overflow:auto;
}
.tabcontent.active{
  display: block;
}
</style>

library_books<script src="jquery.min.js"></script>
<script>
$(".tablink").click(function(){
  $(".tabcontent.active,.tablink.active").removeClass("active");
  $("#"+$(this).attr("data-tab")).add(this).addClass("active");
});
</script>