Question

我有一个选项卡式部分，用于在选择新选项卡时更改内容，但是我希望它在页面加载时始终显示主选项卡。现在，页面加载时没有选项卡显示。我希望您第一次访问该页面时显示主页标签，谢谢！

这是codepen https://codepen.io/emberwolves/pen/rorEmK

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section id="tabbed-wrapper">
 <div id="navSection">
   <a href="#home" class="navLink">Home</a>
   <a href="#work" class="navLink">Work</a>
   <a href="#about" class="navLink">About</a>
   <a href="#contact" class="navLink">Contact</a>
 </div>
 <div id="sections">
   <div id="home" class="tabs">
     <h4>Home Section</h4>
     <p>Welcome. Rather see a CSS only version?</p>
     <p>Check it out <a href='https://codepen.io/EstenGrove/pen/jePMXy' target="_blank">here</a></p>
</div>
<div id="work" class="tabs">
  <h4>Work Section</h4>
  <p>For a pure CSS version check out <a href='https://codepen.io/EstenGrove/pen/jePMXy' target="_blank">here</a></p>
</div>
<div id="about" class="tabs">
  <h4>About Section</h4>
  <p>This was a quick little pen for fun. Don't mind the ugly styling.</p>
</div>
<div id="contact" class="tabs">
  <h4>Contact Section</h4>
  <p>Some random contact details...</p>
  </div>
 </div>
</section>

    //nav links
    const links = document.querySelectorAll('.navLink');
    //Tabbed sections
    const tabs = document.querySelectorAll('.tabs');

    links.forEach(function(link) {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          //remove current class from inactive links
          for(let j = 0; j < links.length; j++) {
            links[j].classList.remove('current');
          }
          //add current class to active link
          e.target.classList.add('current');

            //used to store the target ID in string format
            let target = e.target.textContent.toLowerCase();

            for(let i = 0; i < tabs.length; i++) {
                tabs[i].classList.remove('active')
            }

            //Show active tab
            document.getElementById(target).classList.toggle('active');

        }, false)

    });

Answer 1

只需在html中添加初始类：

1）首先是导航菜单：

<a href="#home" class="navLink current">Home</a>

2）第二个是主页选项卡：

<div id="home" class="tabs active">
  <h4>Home Section</h4>
  <p>Welcome. Rather see a CSS only version?</p>
  <p>Check it out <a href='https://codepen.io/EstenGrove/pen/jePMXy' target="_blank">here</a></p>
</div>

完整示例：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section id="tabbed-wrapper">
  <div id="navSection">
    <a href="#home" class="navLink current">Home</a>
    <a href="#work" class="navLink">Work</a>
    <a href="#about" class="navLink">About</a>
    <a href="#contact" class="navLink">Contact</a>
  </div>
  <div id="sections">
    <div id="home" class="tabs active">
      <h4>Home Section</h4>
      <p>Welcome. Rather see a CSS only version?</p>
      <p>Check it out <a href='https://codepen.io/EstenGrove/pen/jePMXy' target="_blank">here</a></p>
    </div>
    <div id="work" class="tabs">
      <h4>Work Section</h4>
      <p>For a pure CSS version check out <a href='https://codepen.io/EstenGrove/pen/jePMXy' target="_blank">here</a></p>
    </div>
    <div id="about" class="tabs">
      <h4>About Section</h4>
      <p>This was a quick little pen for fun. Don't mind the ugly styling.</p>
    </div>
    <div id="contact" class="tabs">
      <h4>Contact Section</h4>
      <p>Some random contact details...</p>
    </div>
  </div>
</section>

Answer 2

您需要在其上添加click方法。

document.getElementById("test2").click();

更多info。并且您还需要向HTML标记添加ID或类

<a href="#home" id="test2" class="navLink">Home</a>

您的Codepen已编辑。 https://codepen.io/anon/pen/aPjebe

显示当前标签页javascript

2 个答案:

1）首先是导航菜单：

2）第二个是主页选项卡：

完整示例：