2011-07-20 188 views
0

我创建了一种使用jQueryUI选项卡的向导。第一个选项卡让用户从图像矩阵中进行选择,每个图像在其下方都有一个单选按钮和图像标题。出于某种原因,图像,按钮和标题不显示在标签内。下面是该网站:link为什么在选项卡中不显示jQueryUI选项卡的内容?

而这里的代码:

<div id="tabs">   <ul>  <li><a href="#tabs-1">Template Choice</a></li>  <li><a href="#tabs-2">Site Basics</a></li>  <li><a href="#tabs-3">Services List</a></li>  <li><a href="#tabs-4">Products/Resources List</a></li>  <li><a href="#tabs-5">Gallery Images</a></li>  <li><a href="#tabs-6">Buzz List</a></li>  <li><a href="#tabs-7">Review &amp; Confirm</a></li>  </ul>  <div id="tabs-1"> 
       <div> 
        <div class="temp_wrap"> 

       <img src="images/accordion_t.jpg" alt="accordion" /> 

       <div class="temp_desc"> 

        <p><input type="radio">&nbsp;</input>Accordion</p> 

       </div> 
         </div> 
        <div class="temp_wrap"> 

       <img src="images/animation_t.jpg" alt="animation" /> 

       <div class="temp_desc"> 

        <input type="radio">&nbsp;</input>Animation 

       </div> 
          </div> 
        <div class="temp_wrap"> 

       <img src="images/dog_t.jpg" alt="dog" /> 

       <div class="temp_desc"> 

        <input type="radio">&nbsp;</input>Dog 

       </div> 
        </div> 
       </div>  </div>  <div id="tabs-2"> 
       <img id="loading" src="/images/loading.gif" style="display:none;"> 
       <form name="form" action="" method="POST" enctype="multipart/form-data"> 
       <div class="site_basics_line">Enter your Name, or your Company's name:<input type="text"></input></div> 
       <div class="site_basics_line">Enter your Tagline, or your Company's Tagline:<input type="text"></input></div> 

     <div class="site_basics_line">Background Image Upload&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">Please select a file and click Upload button<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div> 

     <div class="site_basics_line">Logo Upload&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">Please select a file and click Upload button<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div> 
       <p>Click here to pick a background color:<input type="text" id="color" name="color" value="#FFFFFF" /><div id="colorpicker"></div></p> 
         </form> 
       <a href="#" id="next_2">Next</a> 
      </div> 
      <div id="tabs-3">  <p> 
       <div class="site_basics_line">Upload a service icon:&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div> 
       <p>Add a title for this service: <input type="text"></input></p> 
       <p>Add a description for this service: <textarea rows="2" cols="20"></textarea></p> 
       </p>  <a href="#" id="next_2">Add</a>&nbsp;<a href="#" id="next_3">Next</a>  </div>  <div id="tabs-4"> 
       <p> 
       <div class="site_basics_line">Upload a product or resource icon:&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div> 
       <p>Add a title for this product or resource: <input type="text"></input></p> 
       <p>Add a description for this product or resource: <textarea rows="2" cols="20"></textarea></p> 
       </p> 
      <a href="#" id="next_2">Add</a>&nbsp;<a href="#" id="next_3">Next</a>  <a href="#" id="next_4"></a>  </div>  <div id="tabs-5">  <p> 
       <div class="site_basics_line">Add a Gallery Image&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">Please select a file and click Upload button<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div> 
       </p>  <a href="#" id="next_5"></a>  </div>  <div id="tabs-6"> 
      <div class="site_basics_line">Add a Buzz Image&nbsp;<input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">Please select a file and click Upload button<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></div>  <p>Add a link for this Buzz Item: <input type="text"></input></p>  <p>Add a description for this service: <textarea rows="2" cols="20"></textarea></p>   <a href="#" id="next_6"></a>  </div>  <div id="tabs-7"> 
       <p>Please confirm that you are satisfied with what you have entered and uploaded to your site. When you are, please click the Submit button. Otherwise, you may edit any of the entries made and return to this portion of the site to confirm your site's content. Note that you may return any time to add, edit, or delete the content of your site.</p>   <a href="#" id="next_0"></a>  </div> </div> 

所有其他选项卡仍能正常运行。

+1

我建议,下一次,请您简单的代码。 –

回答

1

您需要在所有浮动元素之后添加一个额外的元素,以便“向下”压入容器元素。所以,你的情况,只是<div id="tabs-1">结束标记之前添加以下行:

<div style="clear:both; float:none"></div> 
+0

你是受压迫的冠军。谢谢。 – Adam

相关问题