未选择选项卡输入时如何触发输入选项卡选择？

Question

我在页面上有一个标准的选项卡式布局。下面的示例截图。

问题是每个标签都有不同的高度。所以我能找到的最简单的解决方案是检查何时选择了输入选项卡 ID，然后将 CSS 高度强制到它后面的 div。这很好地解决了这个问题。这是我正在使用的代码：

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

不幸的是，这不会触发第一个输入选项卡，因为当页面加载时用户没有选择选项卡 - 第一个选项卡显示为页面加载时的默认选项。

如果没有选择选项卡输入，我将如何创建一个后备，恢复为 tab1 ID？比如：

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

Answer 1

没有看到你的 HTML，我想你可以这样

$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
});

Answer 2

在页面加载时，选择标签并设置高度。在此之后继续附加您的事件侦听器。

window.onload = function () { 
  //set the height as default on page load.
  $("#internalcontainer").css("height","2600px");
  //add the selected class to tab1
  $('#tab1').addClass('selected');

  //Attach rest of the event listener as you wanted.
  document.getElementById('tab1').onclick=function() {
      ................
}