Question

我的HTML中有一组看起来像这样的标签：

<div class = "tab">
    <button id = "Hom" class = "tablinks" onclick = "openTab(event, 'Home')">Home</button>
    <button id = "Con" class = "tablinks" onclick = "openTab(event, 'Conjugations')">Conjugations</button>
    <button id = "AutoCon" class = "tablinks" onclick = "openTab(event, 'Auto Conjugator')">Auto Conjugator</button>
</div>
    <div id = "Home" class = "tabcontent">
        <center>
            <img src = "http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height = "283.5" width = "567">
        </center>
    </div>

JavaScript的：

function openTab(evt, tabName) {

    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(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

我想在页面加载时首先显示主页面选项卡，这样用户就不必单击选项卡。我已经在CSS中尝试过但它似乎没有用。你如何用CSS或JavaScript做到这一点？

Answer 1

这是一个有效的例子; https://codepen.io/curthusting/pen/vpeqWp?editors=1000

我建议不要用javascript修改样式，即 tabcontent[i].style.display = "none";＆amp; document.getElementById(tabName).style.display = "block"; 用css控制它;

.tabcontent {
    display: none;
}
.tabcontent.active {
    display: block;
}

.tablinks {
    background: #fff;
}
.tablinks.active {
    background: #5fba7d;
}

然后像这样修改你的初始html

<div class="tab">
  <button id="Home" class="tablinks active" onclick="openTab(event, 'HomePanel')">Home</button>
  <button id="Con" class="tablinks" onclick="openTab(event, 'ConjugationsPanel')">Conjugations</button>
  <button id="AutoCon" class="tablinks" onclick="openTab(event, 'AutoConPanel')">Auto Conjugator</button>
</div>
<div id="HomePanel" class="tabcontent active">
  <center>
    <h1>Home</h1>
    <img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
  </center>
</div>
<div id="ConjugationsPanel" class="tabcontent">
  <center>
    <h1>Conjugations</h1>
    <img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
  </center>
</div>
<div id="AutoConPanel" class="tabcontent">
  <center>
    <h1>Auto Conjugator</h1>
    <img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
  </center>
</div>

你的javascript看起来像这样

// move these outside the `openTab()` so we can cache them and not retrieve them every time the active tab is changed 
const tabcontent = document.getElementsByClassName("tabcontent");
const tablinks = document.getElementsByClassName("tablinks");

function openTab(evt, tabName) {
  [].forEach.call(tabcontent, function(el) {
      el.classList.remove("active");
  });
  [].forEach.call(tablinks, function(el) {
      el.classList.remove("active");
  });

    document.getElementById(tabName).classList += " active";
    evt.currentTarget.classList += " active";
}

如何在加载页面时自动显示标签

1 个答案: