Home
CSS
HTML

How to create Full Page Tabs using HTML, CSS & JavaScript

Full Page Tabs | Coding Zemigle

Creating a full page tab layout is a great way to organize content in a single-page application. Tabs are especially useful when you want to keep the user on the same page while providing different views or sections of content.

In this tutorial, we'll walk through the process of creating a full-page tab system using HTML, CSS, and JavaScript. Before we start, make sure you have a basic understanding of HTML, CSS, and JavaScript. You don't need to be an expert, but familiarity with these languages will help you follow along with this tutorial.

Step 1: Setting Up the HTML

First, we'll set up the basic HTML structure for our tabs. Create and index.html file and add the following code:

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Full Page Tabs | Coding Zemigle</title>
</head>
<body>
  <button class="tablink" onclick="openPage('Home', this, '#4285F4')">Home</button>
  <button class="tablink" onclick="openPage('News', this, '#DB4437')" id="defaultOpen">News</button>
  <button class="tablink" onclick="openPage('Contact', this, '#0F9D58')">Contact</button>
  <button class="tablink" onclick="openPage('About', this, '#F4B400')">About</button>
<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>
<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>
<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>
<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>
<script src="script.js"></script>
</body>
</html>



This code creates the basic structure with three buttons for the tabs and three corresponding content sections. Each tab button has a data-tab attribute that matches the id of its corresponding content section.

Step 2: Styling with CSS

Next, let's add some CSS to style our tabs. Create style.css file and add the following code:

✲    style.css
* {
  box-sizing: border-box;
}

body, html {
  font-family: "Poppins", sans-serif;
  margin: 0;
  height: 100%;
}

.tablink {
  background-color: #2C3E50;
  font-family: "Poppins", sans-serif;
  color: white;
  float: left;
  border: solid 1px;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

#Home {background-color: #4285F4;}
#News {background-color: #DB4437;}
#Contact {background-color: #0F9D58;}
#About {background-color: #F4B400;}



This CSS code styles the tab buttons and content sections. The .active class is used to show the active tab and hide the others.

Step 3: Adding Interactivity with JavaScript

Finally, let's add the JavaScript to make the tabs functional. Create a script.js file and add the following code:

✲    script.js
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

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

This JavaScript code listens for click events on the tab buttons. When a button is clicked, it removes theactive lass from all buttons and content sections, then adds the active class to the clicked button and its corresponding content section.

Putting It All Together

Now that we've set up the HTML, CSS, and JavaScript, you should have a fully functional tab system. Open your index.html file in a browser to see it in action. Clicking on each tab button should display the corresponding content while hiding the others.

Creating a full page tab system with HTML, CSS, and JavaScript is a straightforward process that can greatly enhance the user experience on your website. By following the steps in this tutorial, you can create a clean, responsive tab layout that organizes your content effectively. Feel free to customize the styles and add more features as needed to suit your project. Happy coding!