How to Create Full Page Tabs with CSS and JavaScript

how-to-create-full-page-tabs-with-css-and-javascript

Tabbed interfaces are commonly used in web applications and websites to organize content into sections.

They allow users to quickly switch between different pages or views within a single interface.

In this tutorial, we’ll show you how to create full-page tabs using CSS and JavaScript.

HTML Structure

The first step in creating a tabbed interface is to define the HTML structure.

In our example, we will use a container div and add a number of child divs to represent each tab.

<div class="tab-container">
  <div class="tab-item">Tab 1</div>
  <div class="tab-item">Tab 2</div>
  <div class="tab-item">Tab 3</div>
</div>

CSS Styling

Next, we’ll use CSS to style the tab container and each tab item.

.tab-container {
display: flex;
width: 100%;
height: 50px;
background-color: #eee;
}

.tab-item {
flex: 1;
text-align: center;
line-height: 50px;
cursor: pointer;
}

JavaScript Functionality

Finally, we’ll add JavaScript functionality to the tabs to allow users to switch between the different tabs.

To do this, we’ll add a click event listener to each tab item and toggle the display of its associated content.

const tabContainer = document.querySelector('.tab-container');
const tabItems = document.querySelectorAll('.tab-item');

tabContainer.addEventListener('click', (e) => {
if (e.target.classList.contains('tab-item')) {
tabItems.forEach((item) => {
item.classList.remove('active');
});
e.target.classList.add('active');
}
});

The above code adds a click event listener to the tab container and listens for clicks on the tab items.

When a tab item is clicked, the code removes the ‘active’ class from all tab items and adds it to the clicked tab item.

Adding Content to Tabs

To display content within the tabs, we can add additional divs within the tab container and toggle their visibility based on which tab is active.

<div class="tab-container">
  <div class="tab-item">Tab 1</div>
  <div class="tab-item">Tab 2</div>
  <div class="tab-item">Tab 3</div>
  <div class="tab-content">Content for Tab 1</div>
  <div class="tab-content">Content for Tab 2</div>
  <div class="tab-content">Content for Tab 3</div>
</div>

.tab-content {
  display: none;
  width: 100%;
  height: calc(100% - 50px);
  background-color: #fff;
}

.tab-item.active + .tab-content {
  display: block;
}

In the CSS, we hide all tab content by default and use the adjacent sibling selector (.tab-item.active + .tab-content) to show the content associated with the active tab.

Enhancing the User Experience

We can enhance the user experience by adding a transition effect when switching between tabs. This can be done by adding the following CSS code:

.tab-content {
transition: all 0.3s ease-in-out;
}

This code adds a transition effect to all properties of the tab content with a duration of 0.3 seconds and an ease-in-out timing function.

In conclusion, tabbed interfaces are a common design pattern in web applications and websites.

With CSS and JavaScript, we can easily create full-page tabs to organize content into sections.

By styling and adding functionality to the tabs, we can create a user-friendly and visually appealing experience for our users.

Tags

Related Posts