Question

我有两个标签部分，我希望默认选择每个标签部分的第一个标签。在这种情况下，选项卡1和选项卡4。我怎么能这样做？

在我的尝试中，我创建了一个按类名选择的for循环，但我注意到只有循环中的最后一个元素总是被选中而不是全部。我没有包括它，因为我认为问题是一次只能选择一个选项卡，但我不知道这个语句在哪里。

一周前刚拿起js。这是我从w3schools获得的一个修改过的例子。

    <md-tab-group>




        <md-tab>
            <template md-tab-label>1</template>
            <template md-tab-content>
               <input type=text required>
                <input type=text required>
                 <input type=text required> 
                 <input type=text required>
                  <input type=text required>
                   <input type=text required>


            </template>
        </md-tab>

       <md-tab>
            <template md-tab-label>2</template>
            <template md-tab-content>
               <input type=text required>
                <input type=text required>
                 <input type=text required> 
                 <input type=text required>
                  <input type=text required>
                   <input type=text required>


            </template>
        </md-tab>

        <md-tab>
            <template md-tab-label>2</template>
            <template md-tab-content>
               <input type=text required>
                <input type=text required>
                 <input type=text required> 
                 <input type=text required>
                  <input type=text required>
                   <input type=text required>


            </template>
        </md-tab>


    </md-tab-group>

    <button type="submit" class="my_button btn btn-success" 
          [disabled]="!data1.valid">  submit</button>




</form>

Answer 1

不确定我是否明白你的意思。但这是一个工作小提琴。

我建议你为你的标签添加一个容器DIV，这样就可以更容易地用javascript获取第一个元素。

如果您还有其他需要，请告诉我。

＆＃13;

window.openCity = function (evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}


document.getElementById("London").style.display='block';
 document.getElementById("1").style.display='block';

＆＃13;

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover,
div.tab button.active{
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.topright:hover {color: red;}

＆＃13;

<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="tab">
  <button class="tablinks active" onclick="openCity(this, 'London');" id="defaultOpen1">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen2">1</button>
  <button class="tablinks" onclick="openCity(event, '2')">2</button>
  <button class="tablinks" onclick="openCity(event, '3')">3</button>
</div>

<div id="1" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="2" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="3" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

＆＃13;

Answer 2

问题是，当你点击标签链接时，你正在全局调用，所以javascript开始寻找类tabContent并隐藏所有这些，即使它们不是你想要隐藏的，也要解决这个问题您可以将选项卡包装在div中的问题，当您单击tablink时，首先找到您所拥有的选项卡容器的ID，然后找到要显示和隐藏的正确内容。我在代码中做了一些调整。

注意：这是一个解决方案，但肯定有更好的方法来执行此选项卡

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    var parent = evt.target.parentNode.parentNode.className;
    console.log(parent);
    tabcontent = document.querySelectorAll("." + parent + " .tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.querySelectorAll("." + parent + " .tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
//    document.getElementById(cityName).style.display = "block";


    document.querySelector("." + parent +" #" + cityName).style.display = "block";
//    console.log(this)
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen1").click();
document.getElementById("defaultOpen2").click();

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.topright:hover {color: red;}

        <!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Click on the x button in the top right corner to close the current tab:</p>
<div class="cities">
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen1">London</button>
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
  </div>


  <div id="London" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
  </div>

  <div id="Tokyo" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

<p>Click on the x button in the top right corner to close the current tab:</p>

<div class="countries">
  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen2">1</button>
    <button class="tablinks" onclick="openCity(event, 'two')">2</button>
    <button class="tablinks" onclick="openCity(event, 'three')">3</button>
  </div>

  <div id="one" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="two" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p> 
  </div>

  <div id="three" class="tabcontent">
    <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</div>

</body>
</html>

Answer 3

[非英语母语者]

你好。发生的事情是你只使用两个标签。您需要隔离每个选项卡并在代码中进行一些更改，以便它可以按您的需要工作。

以下是已更改部分中的评论要点： https://gist.github.com/rdlagemann/720614ca5ca29726a9f671c0dd2d2385

希望它有所帮助！

如何选择选项卡1和4

3 个答案: