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标签中的内容不显示

回答

相关问题