未选择制表符输入时如何触发输入制表符选择? [英] How to trigger an input tab selection when tab input is not selected?

问题描述

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

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

问题是每个选项卡都有不同的高度.因此，我能找到的最简单的解决方案是检查何时选择了输入选项卡ID，然后将css高度强制到其后面的div.这样可以很好地解决问题.这是我正在使用的代码:

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.

我如何创建后备选项，如果没有选择任何选项卡输入，请还原为tab1 ID?像这样:

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

推荐答案

在页面加载时，选择选项卡并设置高度.之后，继续附加事件监听器.

On page load, make the tab selected and set the height. After this go on to attach your event listeners.

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() {
      ................
}

这篇关于未选择制表符输入时如何触发输入制表符选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！