javascript - 显示当前选项卡 javascript

Question

我有一个选项卡式部分，可以在选择新选项卡时更改内容，但我希望它在页面加载时始终显示主页选项卡。目前，页面加载时不会显示任何选项卡。我希望当您第一次访问该页面时显示主页选项卡，谢谢!

这是代码笔 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>