# 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>
<!------->