Tab view design in html

# MAKING OF TAB VIEW DESIGN::



<style>
 .sh14-prohead {
 background-repeat: repeat-x;
 height: 20px;
 font-family: Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 font-weight: bold;
 font-size: 12px;
 padding: 5px;
 }
 
 .sh14-pro-price { text-align: center; }
 
 .pdes24-head224 li 
 {
 padding: 5px;
 margin: 5px;
 background: #CDDC39;
 text-align: center;
 }
 .pdes24-head224 li a {
 text-decoration: none;
 color: black;
 }
</style>
<script>
 function shprodesbx21(k) {
 var getobj = k;
 var pdes_showdvid = getobj.getAttribute('data-for');
 if (pdes_showdvid == 'prodes_tab1') {
 document.getElementById('prodes_tab2').style.display = "none";
 document.getElementById('prodes_tab3').style.display = "none";
 }
 if (pdes_showdvid == 'prodes_tab2') {
 document.getElementById('prodes_tab1').style.display = "none";
 document.getElementById('prodes_tab3').style.display = "none";
 }
 if (pdes_showdvid == 'prodes_tab3') {
 document.getElementById('prodes_tab1').style.display = "none";
 document.getElementById('prodes_tab2').style.display = "none";
 }
 document.getElementById(pdes_showdvid).style.display = "block";
 }
</script>

<!------>
<div style="float:left; width:409px; padding:10px;">
 <div style="width:100%; height:auto; padding:0px; font-family:'Arial Narrow'; font-size:14px; font-weight:normal; color:#000000;">
 <ul style="list-style: none;display: flex;padding-left: 0;" class="pdes24-head224">
 <li>
 <a href="javascript:void(0);" data-for="prodes_tab1" id="hd_prodes_tab1" onclick="return shprodesbx21(this);"><span>Tab-1</span></a>
 </li>
 <li>
 <a href="javascript:void(0);" data-for="prodes_tab2" id="hd_prodes_tab2" onclick="shprodesbx21(this);"><span>Tab-2</span></a>
 </li>
 <li>
 <a href="javascript:void(0);" data-for="prodes_tab3" id="hd_prodes_tab3" onclick="shprodesbx21(this);"><span>Tab-3</span></a>
 </li>
 </ul>
 <div style="min-height:135px;height:auto;font-size: 18px;" class="prodes12_lowerdesbx">
 <ul style="list-style: none;padding:0;">
 <li>
 <div style=" display:bloack;" id="prodes_tab1">TAB-1 CONTENT </div>
 <div style=" display:none;" id="prodes_tab2">TAB-2 CONTENT </div>
 <div style="display:none;" id="prodes_tab3"> TAB-3 CONTENT </div>
 </li>
 </ul>
 </div>
 </div>
</div>
<!------->