Question

我正在尝试使用div创建一个表/网格以并排显示多个选项卡面板，这是一个租车网站。

我尝试对带有图片的选项卡面板使用逐行布局，但是图片占据了整行。我将选项卡面板显示为静态，而将选项卡面板显示为标题第一，图片第二和选项卡面板，价格和信息第三。

我的问题是，当我将选项卡放在表/ div表或任何表示使用行和列的div中时，选项卡面板将不再显示为选项卡面板。下面的示例是我尝试创建网格的http://jsfiddle.net/DHTTWL/jmdjpge0/中使用的更改后的示例。以表格格式显示标签的最佳方法是什么？

<style>
.grid-container {
display : grid;
grid-template-columns: auto auto;
background-color: #2196F3;
padding: 10px;
}
</style>


<div class="grid-container">
<div class="grid-item">

<div id="tabs">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
</ul>
<div id="tabs-1">
<p>Tabs in tab!</p>
  <div id="more-tabs1">
      <ul>
          <li><a href="#nested-tabs-1">Child Tab 1</a></li>
          <li><a href="#nested-tabs-2">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-1"><p>Content here...</p></div>
      <div id="nested-tabs-2"><p>More content here...</p></div>
  </div>
  </div>
  <div id="tabs-2">
   <p>Tabs in tab!</p>
   <div id="more-tabs">
      <ul>
          <li><a href="#nested-tabs-1">Child Tab 1</a></li>
          <li><a href="#nested-tabs-2">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-1"><p>Content here...</p></div>
      <div id="nested-tabs-2"><p>More content here...</p></div>
  </div>
 </div>
 </div>
 </div>
 <div class="grid-item">


 <div id="tabs">
 <ul>
 <li><a href="#tabs-1">First Tab</a></li>
 <li><a href="#tabs-2">Second Tab</a></li>
 </ul>
 <div id="tabs-1">
 <p>Tabs in tab!</p>
  <div id="more-tabs1">
      <ul>
          <li><a href="#nested-tabs-4">Child Tab 1</a></li>
          <li><a href="#nested-tabs-5">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-4"><p>Content here...</p></div>
      <div id="nested-tabs-5"><p>More content here...</p></div>
  </div>
</div>
<div id="tabs-2">
  <p>Tabs in tab!</p>
  <div id="more-tabs">
      <ul>
          <li><a href="#nested-tabs-6">Child Tab 1</a></li>
          <li><a href="#nested-tabs-7">Child Tab 2</a></li>
      </ul>
      <div id="nested-tabs-6"><p>Content here...</p></div>
      <div id="nested-tabs-7"><p>More content here...</p></div>
  </div>
 </div>
</div>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#more-tabs" ).tabs();
$( "#more-tabs1" ).tabs();
});
</script>

此代码呈现第一个选项卡，而不呈现第二个选项卡，第二个选项卡最终以html格式显示，第二个选项卡应该使用第二个脚本吗？我有一个不同的脚本，它是动态的，您可以根据需要添加或删除所有信息的标签，但是我遇到了同样的问题，即标签并非全部按设计显示。

创建一个在每个列中都带有选项卡面板的网格？

0 个答案: