Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 16, 2022 12:57 pm GMT

How to create full page tabs with Html, CSS and JavaScript

In this blog, I will teach you how to create full page tabs with Html, css, and JavaScript.

Source Code

<div class="container">    <div class="tab__conatiner">        <button class="home tab">home</button>        <button class="news tab">News</button>        <button class="contact tab">Contact</button>        <button class="blog tab">BLog</button>        <button class="about tab">About</button>    </div>    <div id="Home" class="tab__content active">        <h3>Home</h3>        <p>Home is where the heart is..</p>    </div>    <div id="News" class="tab__content">        <h3>News</h3>        <p>Some news this fine day!</p>    </div>    <div id="Contact" class="tab__content">        <h3>Contact</h3>        <p>Get in touch, or swing by for a cup of coffee.</p>    </div>    <div id="Blog" class="tab__content">        <h3>Blog</h3>        <p>Welcome to the blog.</p>    </div>    <div id="About" class="tab__content">        <h3>About</h3>        <p>Who we are and what we do.</p>    </div></div>
* {    padding: 0;    margin: 0;    box-sizing: border-box;}body {    font-family: Arial, Helvetica, sans-serif;    max-width: 100vw;    max-height: 100vh;    overflow: hidden;}.container {    min-height: 100vh;    display: grid;    grid-template-rows: 5rem 1fr;}.tab__conatiner {    display: flex;}.tab {    background-color: #555;    color: #fff;    border: none;    outline: none;    cursor: pointer;    padding: 14px 16px;    font-size: 17px;    flex-basis: 20%;    text-transform: uppercase;}.tab__content {    color: #fff;    display: none;    padding: 100px 20px;    height: 100%;}.tab__content h3 {    font-size: 2rem;    margin-bottom: 20px;}.active {    display: block;}.tab:hover {    background-color: #777;}#Home {    background-color: #f00;}#News {    background-color: #008000;}#Contact {    background-color: #00f;}#About {    background-color: #ffa500;}#Blog {    background-color: #008080;}

Image description

Explanation :

  1. We have a .container that will contain the tabs and the tab content.
  2. .container will be a two-row grid and will take full screen.
  3. tab__content will be hidden by default. But if it has an active class then it will be visible.
  4. Each tab__content also has an Id with it.
  5. Each tab will have a class which will be the identity of that tab. For instance, the Home tab will have a home class

JavaScript

const pairs = {    home: 'Home',    news: 'News',    contact: 'Contact',    blog: 'Blog',    about: 'About',}const tabs = document.querySelectorAll('.tab')const callback = function () {    const ACTIVE = 'active'    const active = document.querySelector(`.tab__content.${ACTIVE}`)    active.classList.remove(ACTIVE)    const tabName = this.classList[0]    const tabContent = document.getElementById(pairs[tabName])    tabContent.classList.add(ACTIVE)}tabs.forEach(tab => tab.addEventListener('click', callback))

Explanation:

  1. We store the tab and content pairs inside the object.
  2. Key will be tab name and value will be content id.
  3. Callback function will hold the actual functionality. First, it will remove the active class from the previous tab content that has an active class.
  4. Then we get the tab name using the first class. Here the this keyword is referring to the actual element that the callback function will be attached.
  5. Now, we get the tab content element using the tabname from the pairs object. Then we attach the active class.
  6. Finally, we need to attach click eventListenter to every tab.

Final result:

That's it for today's blog.

Shameless Plug

I have made few project based videos with vanilla HTML, CSS, and JavaScript.





You will learn about:

  • Javascript intersection observer to add cool effects
  • DOM manipulation
  • Aligning elements with CSS positions.
  • How to make responsive websites.

These will be great projects to brush up on your front end skills.

If you are interested you can check the videos.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project.

See my work from here

Contacts

Videos might you might want to watch:





Blogs you might want to read:


Original Link: https://dev.to/thatanjan/how-to-create-full-page-tabs-with-html-css-and-javascript-5c67

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To