Menu icon Foundation
active tab not showing blue color on refresh

Hi Guys Im wondering why my tab is not showing which tab is blue/active initially on load. It shows the active content but all tabs are the same color and I would like to have it so it shows the blue active tab.

This is the tab code i have:

<div class="content active" id="panel1">
   <div class="row">
       <div class="large-6 columns">
        <h3>Mission Statement:</h3> 
<p>
 <h6><strong>Vision</strong></h6> 
A virtual learning environment where inclusion creates a collaborative community and 21st century teaching creates opportunities for learning. 
</p>
<p>
<h6><strong>Mission</strong></h6>To create a virtual school where student achievement is powered by human relations, high quality curriculum, and innovative methods for teaching and learning.
<p/>
<p>
<h6><strong>Core Values</strong></h6>
Provide an inclusive and supportive learning environment for students
Provide the least restrictive learning environment possible for online learners
Provide the most current and relevant teaching and learning methods for student success
Practice research-based strategies and data-driven instruction 
Guide students toward college or career choices and/ opportunities
</p>
       </div>
       <div class="large-6 columns">
          <iframe src="https://www.youtube.com/embed/AqoTzHaNhos">
                              
       </iframe>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         

tabs

Hi Guys Im wondering why my tab is not showing which tab is blue/active initially on load. It shows the active content but all tabs are the same color and I would like to have it so it shows the blue active tab.

This is the tab code i have:

<div class="content active" id="panel1">
   <div class="row">
       <div class="large-6 columns">
        <h3>Mission Statement:</h3> 
<p>
 <h6><strong>Vision</strong></h6> 
A virtual learning environment where inclusion creates a collaborative community and 21st century teaching creates opportunities for learning. 
</p>
<p>
<h6><strong>Mission</strong></h6>To create a virtual school where student achievement is powered by human relations, high quality curriculum, and innovative methods for teaching and learning.
<p/>
<p>
<h6><strong>Core Values</strong></h6>
Provide an inclusive and supportive learning environment for students
Provide the least restrictive learning environment possible for online learners
Provide the most current and relevant teaching and learning methods for student success
Practice research-based strategies and data-driven instruction 
Guide students toward college or career choices and/ opportunities
</p>
       </div>
       <div class="large-6 columns">
          <iframe src="https://www.youtube.com/embed/AqoTzHaNhos">
                              
       </iframe>
       </div>
   </div>
   <a href="#" class="button info round">Learn More</a>
   <a href="#" class="button success round">Sign Up</a>
  </div>
            

         

This post has been closed. No new replies can be added.

Ryan Hellerud almost 5 years ago

thanks

Mike Mannakee almost 5 years ago

The tab element also has to have the active class applied. Not just the content element. You're not showing the tab elements, but it would look like the example on the docs page.

<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>...  // Notice the 'active' class