如何在未选择标签输入时触发输入标签选择?

时间:2017-01-19 11:17:27

标签: javascript jquery html css tabs

我在页面上有一个标准的标签式布局。以下示例的屏幕截图。 enter image description here

问题是每个标签都有不同的高度。我能找到的最简单的解决方案是检查选择输入选项卡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

2 个答案:

答案 0 :(得分:0)

没有看到你的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
});

答案 1 :(得分:-1)

在页面加载时,选中选项卡并设置高度。在此之后继续附加您的事件监听器。

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