Jquery流水遊戲 - 標籤 - div標籤中的內容不顯示

我正在尋找一個簡單的JQuery選項卡的例子，其中我計劃展示兩種不同的形式。Jquery流水遊戲 - 標籤 - div標籤中的內容不顯示

我遇到了這個例子http://flowplayer.org/tools/demos/tabs/index.htm這是完美的我的需求。

所以我實現了這個簡單的例子。有問題的代碼是：

 
<div class="panes"> 
    <div>First tab content. Tab contents are called "panes"</div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

現在我的第一個選項卡的內容是其中有幾個自己的div標籤的形式 - 當我把這種形式使用div標籤作爲第一標籤中的內容 - 出現什麼。

所以我做了一個簡單的變化，並增加了一個div標籤的第一個選項卡的內容，如下圖所示，仍然會出現什麼：

 
<div class="panes"> 
    <div><div>First tab content. Tab contents are called "panes"</div></div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

有沒有一種簡單的方法來解決這個問題。這是我想在我的第一個選項卡中顯示的內容 -

 
<div id="formbox" class="formbox">  
<form id="shopping_form" method="post"> 

    <div id="3" style="width:520px;" >      
     <textarea id="message" name="message" rows="3" cols="50"></textarea> 
    </div> 

    <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
     <input type="text" id="store" name="store" class="required" size="20" /> 
     <input type="hidden" id="store_id"/>     
    </div> 
    <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
    <input type="text" id="city" name="city" size="15"/> 
    </div>     
    <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
    <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
    </div> 

    <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
     <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
     <input type="hidden" id="google_address"/>     
    </div> 

    <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
    <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
     <b>Address/Country</b>     
     <input type="text" id="address" name="address" size="20" /> 
     <input type="text" id="country" name="country" size="20"/> 
    </div> 

    <div style="width:520px;float:left;padding-bottom:10px;" > 
     <b>Price    
     <input type="text" id="price" name="price" size="20" />  
    </div>  

    <div id="buttonrow" style="width:200px;float:right;display:none;" > 
     <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
    </div> 

</form> 
</div>

來源

2010-06-18 Gublooo

在沒有附加div的第一個示例中，它是否正常工作？ – MindingData 2010-06-18 00:49:21

是的，一個工作正常 - 如果只是添加文本的作品 - 只有當你添加一個div它不工作 – Gublooo 2010-06-18 01:19:44

我仍然偏jQuery UI的標籤感謝您的幫助，但這裏是如何使它具有的Flowplayer工作：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Tools standalone demo</title> 
    <!-- include the Tools --> 
    <script src="http://flowplayer.org/tools/download/combine/1.2.3/jquery.tools.min.js?select=full&debug=true"></script> 
    <!-- standalone page styling (can be removed) --> 
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> 
    <!-- tab styling --> 
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" /> 
    <!-- tab pane styling --> 
    <style> 
    div.wrap { 
     width:700px; 
     margin-bottom:40px; 
    } 
    .wrap .pane { 
     background:#fff url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 20px; 
     display:none;  
     padding:20px; 
     border:1px solid #999; 
     border-top:0; 
     font-size:14px;  
     font-size:18px; 
     color:#456; 

     _background-image:none; 
    } 
    .wrap .pane p { 
     font-size:38px; 
     margin:-10px 0 -20px 0; 
     text-align:center; 
     color:#578; 
    } 
    .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
    .clearfix {display:block;} 
    </style> 
    </head> 
    <body> 
    <div class="wrap"> 
    <!-- the tabs --> 
    <ul class="tabs"> 
     <li><a href="#">Form</a></li> 
     <li><a href="#">Tab 2</a></li> 
     <li><a href="#">Tab 3</a></li> 
    </ul> 
    <!-- tab "panes" --> 
    <div class="pane clearfix"> 
     <div id="formbox" class="formbox">  
     <form id="shopping_form" method="post"> 
     <div id="3" style="width:520px;" >      
       <textarea id="message" name="message" rows="3" cols="50"></textarea> 
     </div> 
     <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
      <input type="text" id="store" name="store" class="required" size="20" /> 
      <input type="hidden" id="store_id"/>     
     </div> 
     <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
      <input type="text" id="city" name="city" size="15"/> 
     </div>     
     <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
      <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
     </div> 
     <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
      <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
      <input type="hidden" id="google_address"/>     
     </div> 
     <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
     <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
      <b>Address/Country</b>     
      <input type="text" id="address" name="address" size="20" /> 
      <input type="text" id="country" name="country" size="20"/> 
     </div> 
     <div style="width:520px;float:left;padding-bottom:10px;" > 
      <b>Price 
      <input type="text" id="price" name="price" size="20" />  
     </div>  
     <div id="buttonrow" style="width:200px;float:right;display:none;" > 
      <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
     </div> 
     </form> 
     </div>  
    </div> 
    <div class="pane"> 
     <p>#2</p> 
    </div> 
    <div class="pane"> 
     <p>#3 </p> 
    </div> 
    </div> 
    <!-- This JavaScript snippet activates those tabs --> 
    <script> 
    // perform JavaScript after the document is scriptable. 
    $(function() { 
    $("ul.tabs").tabs("> .pane"); 
    }); 
    </script> 
    </body> 
</html>

來源

2010-06-19 17:43:08

我會注意到，這完美的FF，但您可能需要調整的CSS Safari和chrome讓標籤2和3正常工作。沒有用IE測試。看看流水遊戲如何執行多個嵌套選項卡。而不是第二組標籤，你會有你的形式。請記住，您需要使用clearfix類來封裝您的表單。這裏是流量播放器的例子：http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm – 2010-06-19 17:47:33

感謝您花時間的人 - 欣賞它。 – Gublooo 2010-06-19 18:52:16

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 
    <style> 
    .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
    .clearfix {display:block;} 
    </style> 
    </head> 

    <body> 
    <script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">First Tab (Form)</a></li> 
     <li><a href="#tabs-2">Second Tab</a></li> 
     <li><a href="#tabs-3">Third Tab</a></li> 
     </ul> 
     <div id="tabs-1" class="clearfix"> 
     <div> 
      <div id="formbox" class="formbox">  
      <form id="shopping_form" method="post"> 
      <div id="3" style="width:520px;" >      
        <textarea id="message" name="message" rows="3" cols="50"></textarea> 
      </div> 
      <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b> 
       <input type="text" id="store" name="store" class="required" size="20" /> 
       <input type="hidden" id="store_id"/>     
      </div> 
      <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b> 
       <input type="text" id="city" name="city" size="15"/> 
      </div>     
      <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;"> 
       <input class="find_address" id="findaddress" type="button" value="Find Store"/> 
      </div> 
      <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;"> 
       <b>Select Store</b><select id="google_stores" name="google_stores"></select> 
       <input type="hidden" id="google_address"/>     
      </div> 
      <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div> 
      <div id="locationrow" style="float:left;padding-bottom:10px;display:none;"> 
       <b>Address/Country</b>     
       <input type="text" id="address" name="address" size="20" /> 
       <input type="text" id="country" name="country" size="20"/> 
      </div> 
      <div style="width:520px;float:left;padding-bottom:10px;" > 
       <b>Price 
       <input type="text" id="price" name="price" size="20" />  
      </div>  
      <div id="buttonrow" style="width:200px;float:right;display:none;" > 
       <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>    
      </div> 
      </form> 
      </div> 
     </div> 
     </div> 
     <div id="tabs-2"> 
     <p>Second Tab Content</p> 
     </div> 
     <div id="tabs-3"> 
     <p>Third Tab Content</p> 
     </div> 
    </body> 
</html>

來源

2010-06-19 07:28:58

謝謝安德魯 - 我也看過這個例子 - 這是從jquery官方網站權利 - http：// docs .jquery.com /用戶界面/選項卡＃源 - 是的，這一個工作，但我想弄清楚如何使流水遊戲工作 – Gublooo 2010-06-19 07:56:47

Jquery流水遊戲 - 標籤 - div標籤中的內容不顯示

回答

相關問題