2017-01-19 8 views
-1

我在頁面上有一個標準的標籤頁式佈局。以下示例的屏幕截圖。 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 

回答

-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 
}); 
相關問題