javascript - How to trigger an input tab selection when tab input is not selected?

Question

I have a standard tabbed layout on a page. Screenshot of example below.

Problem is each tab has a different height. So easiest solution I can find is to check when the input tab ID is selected, and then force a css height to the div behind it. This fixes the problem very nicely. This is the code I am using:

<script type='text/javascript'>
    window.onload = function () { 
      document.getElementById('tab1').onclick=function() {

      $("#internalcontainer").css("height","2600px");
      }    
      document.getElementById('tab2').onclick=function() {

      $("#internalcontainer").css("height","1000px");
      }  
      document.getElementById('tab3').onclick=function() {

      $("#internalcontainer").css("height","1200px");
      }  
      document.getElementById('tab4').onclick=function() {

      $("#internalcontainer").css("height","1200px");
      } 
      document.getElementById('tab5').onclick=function() {

      $("#internalcontainer").css("height","600px");
      }  
      document.getElementById('tab6').onclick=function() {

      $("#internalcontainer").css("height","2400px");
      }  
      document.getElementById('tab7').onclick=function() {

      $("#internalcontainer").css("height","800px");
      }  
}
</script>

Unfortunately this does not trigger the first input tab since when page loads the user is not selecting the tab - the first tab shows as default on page load.

How would I create a fallback where if no tab inputs are selected, revert to tab1 ID? Something like:

if tab1 selected = do this
if tab2 selected = do that
else = tab1 rule is selected

Answer 1

Not seeing your HTML, I would think you could so something like this

$function () { 
  $('.tab').on("click",function() { // any tab, use class="tab"
    $("#internalcontainer").height($(this).parent().find(".someDiv").height());
  }).eq(0).click(); // trigger the first onload or look at the URL
});