显示当前标签页

Question

I have a tabbed section that changes the content when selecting a new tab but I want it to always show the home tab when the pages loads. Right now, no tabs displays when the page loads. I want the home tab to show when you first visit the page, Thanks!

Here is the 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

Just add initial classes in your html:

1) First place is nav menu:

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

2) Second place is home tab:

<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>

Full example:

<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

you need to add click method on it .

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

For more info . And also you need to add id or class to your html tag

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

your codepen edited. https://codepen.io/anon/pen/aPjebe