Question

我有以下代码：Link

问题在于，当一个选项卡处于活动状态时，这些选项卡不能同时处于活动状态

active另一个被禁用，我不知道如何使它工作。我有

仅使用HTML和CSS

我想要的是两者都在选项卡1中处于活动状态，并且我们甚至保持活动状态

尽管我们有不同的选项卡，因为我的想法是使用

添加更多div

标签。我留下了指向CodePen的链接，并在此处插入了代码。

.tabs {
	display: flex;
	flex-wrap: wrap; 
}
.tabs label {
	order: 1; 
	display: block;
	padding: 1rem 2rem;
	cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; 
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

<div class="tabs">
            <input type="radio" name="tab" id="tabone" checked="checked">
            <label for="tabone">Tab One</label>
            <div class="tab">
              <h1>Tab One Content</h1>
            </div>
            <input type="radio" name="tab" id="tabtwo">
            <label for="tabtwo">Tab Two</label>
            <div class="tab">
              <h1>Tab Two Content</h1>
            </div>
            <input type="radio" name="tab" id="tabthree">
            <label for="tabthree">Tab Three</label>
            <div class="tab">
              <h1>Tab Three Content</h1>
            </div>
          </div>
          <br><br><br>
          <div class="tabs">
                <input type="radio" name="tab" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

Answer 1

不能100％肯定我理解这个问题，但是在我看来，您只需要为每个单独的标签集中的Fatal error: Uncaught Error: Call to undefined function query() in S:\xampp\htdocs\var\www\html\pendaftaran-siswa\ajax\mahasiswa.php:11 Stack trace: #0 {main} thrown in S:\xampp\htdocs\var\www\html\pendaftaran-siswa\ajax\mahasiswa.php on line 11属性使用不同的值即可。

Answer 2

似乎您想使许多选项卡组彼此独立地工作（一个打开，其他关闭）。

为每个name添加一个不同的set of tabs属性值，这样，每个集合将作为一个单元工作，如果打开一个集合，其他选项卡将被关闭。

在您给出的示例中，第一个选项卡内tab侧面的所有无线电可能具有值为name的{{1}}属性值和第二个选项卡组下的其他无线电可能有tab1。

PS：单选按钮的名称属性仅允许检查同一个单选按钮之一。

Answer 3

              <div class="tabs">
                <input type="radio" name="tab2" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

对于第二部分，为每组单选按钮添加不同的值到name属性。您之前所做的是将checked添加到同一组单选按钮中的两个按钮中。

Answer 4

这是使用两个面板的完整解决方案。

.tabs {
  display: flex;
  flex-wrap: wrap; 
}

.tabs label {
  order: 1; 
  display: block;
  padding: 1rem 2rem;
  cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs [class^="tab"] {
  order: 99; 
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: #fff;
}

.tabs input[type="radio"]:checked + label + [class^="tab"] {
  display: block;
}

<div class="tabs">
    <input type="radio" name="tab" id="tabone" checked="checked">
    <label for="tabone">Tab One</label>
    <div class="tab">
        <h1>Tab One Content (1)</h1>
    </div>
    <input type="radio" name="tab" id="tabtwo">
    <label for="tabtwo">Tab Two</label>
    <div class="tab">
        <h1>Tab Two Content (1)</h1>
    </div>
    <input type="radio" name="tab" id="tabthree">
    <label for="tabthree">Tab Three</label>
    <div class="tab">
        <h1>Tab Three Content (1)</h1>
    </div>
</div>

<div class="tabs">
    <input type="radio" name="tab2" id="tabfour" checked="checked">
    <label for="tabfour">Tab One</label>
    <div class="tab2">
        <h1>Tab One Content (2)</h1>
    </div>
    <input type="radio" name="tab2" id="tabfive">
    <label for="tabfive">Tab Two</label>
    <div class="tab2">
        <h1>Tab Two Content (2)</h1>
    </div>
    <input type="radio" name="tab2" id="tabsix">
    <label for="tabsix">Tab Three</label>
    <div class="tab2">
        <h1>Tab Three Content (2)</h1>
    </div>
</div>

页面上的多个选项卡-HTML CSS

4 个答案: