html5選項卡式頁面不會調整頁面

我正在努力處理一些HTML5。我有一個頁面，我想要在頂部放置一個表單，然後是標籤頁....我試圖做一個摺疊部分，其中有三個列，然後是標籤....並且我希望摺疊部分擴大佔據儘可能多的空間，因爲它需要....我所看到的是標籤頁不會下移超過設定的數額...html5選項卡式頁面不會調整頁面

因此，這裏是我試圖概述要做到：

摺疊部分
COL1 COL2 COL3
XXXXX YYYYYY ZZZZ
XXXXX YYYYYY ZZZZ
/摺疊部分
```
tab1 , tab2, tab3 ..... 
```

下面是一些示例代碼，顯示問題....我已經注意到，這是用各種標籤的發生......對於我的「真實」的網頁我使用的是完全不同的CSS，等....但這個例子的代碼顯示了同樣的問題....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--DVID=00014EAC--> 
<HTML> 
<head> 

<title>Tabs in HTML with CSS</title> 
<style type="text/css"> 
<!-- 
#tabs { 
    border-bottom: .5em solid #0033CC; 
    margin: 0; 
    padding: 0; 
} 
#tabs li { 
    display:inline; 
    border-top: .1em solid #03c; 
    border-left: .1em solid #03c; 
    border-right: .1em solid #03c; 
} 
#tabs li a { 
     text-decoration: none; 
    padding: 0.25em 1em; 
    color: #000; 
} 
#page1 #tabs li#tab1 a, #page2 #tabs li#tab2 a, #page3 #tabs li#tab3 a, .page4 li#tab4 a { 
    padding: 0.25em 1em; 
    background-color: #03c; 
    color: #fff; 
} 
    --> 

.ScanVINTextBoxStyle3 { width: 180px; } 
.divTable  { width: 35%; height: 10%; display: table; } 
.divTableRow { width: 100%; height: 100%; display: table-row;} 
.divTableCell { width: 25%; height: 100%; display: table-cell;} 


.cols { width:1020px; } 
.ltcol, .ctcol, .rtcol { width:300px; margin:0 10px; padding:10px; } 
.ltcol, .ctcol   { float:left; } 
.rtcol     { float:right; } 

.layer1 
{ 
margin: 0; 
padding: 0; 
width: 500px; 
} 

.heading 
{ 
margin: 1px; 
color: #fff; 
padding: 3px 10px; 
cursor: pointer; 
position: relative; 
background-color:#c30; 
} 

.content 
{ 
padding: 5px 10px; 
background-color:#fafafa; 
} 

p 
{ 
padding: 5px 0; 
} 
</style> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    //toggle the componenet with class msg_body 
    jQuery(".heading").click(function() { 
     jQuery(this).next(".content").slideToggle(500); 
    }); 
}); 
</script> 
</head> 

<body id="page2"> 

    <form> 
    <div class="divTable"> 
      <div class="divTableRow"> 
       <div class="divTableCell"><label>VIN</label> </div> 
       <div class="divTableCell"> <text></text> </div> 
       <div class="divTableCell"> <input type="submit" value="Display" /> </div> 
      </div> 
     </div> 


     <div class="layer1"> 
       <p class="heading">Data</p> 
       <div class="content"> 
        <div class="cols"> 
         <div class="ltcol"> 
           <div class="divTable"> 
            <div class="divTableRow"> 
             <div class="divTableCell"> <label>Voyage</label> </div> 
             <div class="divTableCell"> <label>xxxx</label> </div> 
            </div> 
            <div class="divTableRow"> 
             <div class="divTableCell"> <label>Vessel</label> </div> 
             <div class="divTableCell"> <label>xxxx</label> </div> 
             <div class="divTableCell"> <label>yyyy</label> </div> 
            </div> 
            <div class="divTableRow"> 
             <div class="divTableCell"> <label>Vessel</label> </div> 
             <div class="divTableCell"> <label>xxxx</label> </div> 
             <div class="divTableCell"> <label>yyyy</label> </div> 
            </div> 
                <div class="divTableRow"> 
             <div class="divTableCell"> <label>Vessel</label> </div> 
             <div class="divTableCell"> <label>xxxx</label> </div> 
             <div class="divTableCell"> <label>yyyy</label> </div> 
            </div> 
                <div class="divTableRow"> 
             <div class="divTableCell"> <label>Vessel</label> </div> 
             <div class="divTableCell"> <label>xxxx</label> </div> 
             <div class="divTableCell"> <label>yyyy</label> </div> 
            </div> 
           </div> 
         </div> 
         <div class="ctcol"> 
           center 
         </div> 
         <div class="rtcol"> 
          right 
         </div> 
        </div> 
       </div> 
      </div> 
    </form> 



<ul id="tabs"> 
<li id="tab1"><a href="ztab1.htm">Tab 1</a></li> 
<li id="tab2"><a href="ztab2.htm">Tab 2</a></li> 
<li id="tab3"><a href="ztab3.htm">Tab 3</a></li> 
<li id="tab4"><a href="ztab4.htm">Tab 4</a></li> 
</ul> 
<p>The only difference in the HTML code between this page and the other three tabbed pages is that this page has an id on the body tag that names it "page2".</p> 
<p><a href="/od/layout/a/aa042307.htm">Return to the Tabbed Navigation Article</a> </p> 
</body> 
</html>

來源

2013-08-01 user2040849

這是一個與slideToggle一個問題，你不能slideToggle高度爲auto。它不在它的功能範圍內。

至於你必須使用一個變通喜歡的。結果發現in this SO post

我用第一種方法來解決您的問題。 Here's a working jsFiddle

更新的jQuery

jQuery(document).ready(function() { 
    jQuery(".content").hide(); 
    //toggle the componenet with class msg_body 
    jQuery(".heading").click(function() { 
     $(this).next(".content").animate({ 
      height: '300px' // some arbitrary height approaching target height 
     }, { duration: 700 /* longer than the next animation */, queue: false }); 
     jQuery(this).next(".content").slideToggle({ 
      duration: 500, 
      queue: false, 
      complete: function() { 
       var divAheight = $('.content').height(); 
       // stop the animation and begin another with the correct target height 
       $(this).stop().animate({ height: divAheight }, "slow"); 
      } 
     }); 
    }); 
});

來源

2013-08-01 18:10:46

謝謝....我很困惑的原因...這偉大工程....非常感謝！ – user2040849

html5選項卡式頁面不會調整頁面

回答

相關問題