2017-01-19 21 views
-1

私はページに標準のタブ付きレイアウトを持っています。以下の例のスクリーンショット enter image description hereタブ入力が選択されていないときに入力タブ選択をトリガする方法は?

問題は各タブの高さが異なります。だから私が見つけることができる最も簡単な解決策は、入力タブIDが選択されていることを確認し、その背後にあるdivにCSSの高さを強制することです。これは問題を非常にうまく解決します。これは私が使用していたコードです:ページがロードされたときにユーザーがタブを選択していないので

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

残念ながら、これは、第1の入力]タブをトリガしません - 最初のタブには、ページのロード時にデフォルトとして表示されます。

タブ入力が選択されていない場合、タブ1のIDに戻す代替方法を作成するにはどうすればよいですか?次のようなもの:

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

答えて

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

ような何かああはい、もちろん。非常に良い解決策。あなたのお時間をありがとうございました。 – HollerTrain

+0

jQueryとDOMを混在させないでください。 '$(function(){....});' – mplungjan

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 
}); 
関連する問題