使用标签视图包含另一个标签

时间:2017-02-15 08:54:48

标签: jquery html css twitter-bootstrap tabs

我正在尝试创建标签,并在父标签中添加其他标签。我的问题是当我单击子选项卡,父关闭它时,当我单击任何选项卡时,它必须添加id到url,因为我的子选项卡有表单并添加一些东西。在我添加一些东西后,试图回到原来的位置。我想我的问题在于风格部分。

感谢您的帮助

div.tabs {
  margin: auto;
  width: 60%;
  padding: 10px;
  text-align: center;
}
div.tab {
  display: none;
  text-align: center;
}
div.tab:target {
  display: block;
}
:target div.tab {
  display: block;
}
:target div.tab + div.itab {
  display: none;
}
div.tabss {
  margin: auto;
  width: 60%;
  padding: 10px;
  text-align: center;
}
div.itab {
  display: none;
  text-align: center;
}
div.itab:target {
  display: block;
}
:target div.itab {
  display: block;
}
:target div.itab + div.itab {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<br></br>
<div class="tabbed">
  <!-- Main tab view -->
  <div class="tabs">
    <a href="#aracB">Araç Bilgisi</a>
    <a href="#parcaB">Yedek Parça Bilgisi</a>
    <a href="#musteriB">Müşteri Bilgisi</a>
  </div>

  <div id="aracB" class="tab">
    <p>Araç Bilgisi</p>
  </div>
  <div id="parcaB" class="tab">
    <p>Yedek Parça Bilgisi</p>
    <div class="tabbedd">
      <!-- Chiled tab -->
      <div class="tabss">
        <a href="#yedekE">Yedek Parça Stoğa Ekleme</a>
        <a href="#yedekL">Yedek Parça Stok Listesi</a>
        <a href="#yedekG">Yedek Parça Stok Güncelleme</a>
      </div>
      <div id="yedekE" class="itab">
        <p>Yedek Parça Stoğa Ekleme</p>
        <div w3-include-html="parca_ekle.html"></div>
      </div>
      <div id="yedekL" class="itab">
        <p>Yedek Parça Stok Listesi</p>
        <div w3-include-html="stok_liste.php"></div>
      </div>
      <div id="yedekG" class="itab">
        <p>Yedek Parça Stok Güncelleme</p>
        <div w3-include-html="stok_update.php"></div>
      </div>
    </div>
  </div>
  <div id="musteriB" class="tab">
    <p>Müşteri Bilgisi</p>
  </div>
</div>

0 个答案:

没有答案