How to Change Tabs Horizontally on Hover with Tailwind CSS and JavaScript ?
Changing tabs on hover in Tailwind CSS enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore different sections and increase engagement. We can also add CSS transitions for visual effects.
Preview:
Approach:
- The body element contains a flex container (
div.flex
) at the top of the page with three tabs (div.tab
elements) for HTML, Tailwind, and JavaScript. - The content for each tab is placed in
div.tab-content
elements, and initially, all content is hidden (class="tab-content hidden"
). - The script selects all elements with the class .tab and .tab-content. These elements represent the tabs and their corresponding content, respectively.
- For each tab element, an event listener is added for the mouseenter event. This means when the mouse hovers over a tab, the associated content will be displayed.
- When a tab is hovered over, the script hides all tab contents by removing the active class from each content element.
- The script then identifies the ID of the content associated with the hovered tab using the data-tab attribute. It adds the active class to the corresponding content element, making it visible.
Example: Illustration of changing Tabs horizontally on Hover with Tailwind CSS and JavaScript.
Javascript
// Get all tab elements const tabs = document.querySelectorAll( '.tab' ); const tabContents = document.querySelectorAll( '.tab-content' ); // Loop through each tab tabs.forEach((tab) => { tab.addEventListener( 'mouseenter' , () => { // Hide all tab contents tabContents.forEach((content) => { content.classList.remove( 'active' ) }) // Show the corresponding tab content const tabId = tab.getAttribute( 'data-tab' ) document.getElementById(tabId).classList.add( 'active' ) }) }) |
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0" /> < title >Horizontal Tab Hover with Tailwind CSS and JavaScript </ title > < link rel = "stylesheet" href = "style.css" > <!-- Tailwind CSS CDN link --> < link href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel = "stylesheet" /> </ head > < body > < div class = "flex bg-green-500 py-3 top-0" > < div class="tab cursor-pointer px-8 py-4 transition duration-300 hover:bg-gray-100 transform hover:translate-y-1" data-tab = "tab1" >HTML</ div > < div class="tab cursor-pointer px-8 py-4 transition duration-300 ease-in-out hover:bg-gray-100 transform hover:translate-y-1" data-tab = "tab2" >Tailwind</ div > < div class="tab cursor-pointer px-8 py-4 transition duration-300 ease-in-out hover:bg-gray-100 transform hover:translate-y-1" data-tab = "tab3" >Javascript</ div > </ div > <!-- Tab contents --> < div class = "mt-4" > < div class = "tab-content hidden" id = "tab1" > HTML stands for HyperText Markup Language. It creates a complete website structure of web pages. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages and markup language defines the text document within the tag. This HTML Tutorial provides basic to advanced concepts for beginners and professionals. </ div > < div class = "tab-content hidden" id = "tab2" > Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Also, it is a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS. </ div > < div class = "tab-content hidden" id = "tab3" > JavaScript (JS) is the most popular lightweight, interpreted compiled programming language. It can be used for both Client-side as well as Server-side developments. It is also known as a scripting language for web pages. This free JavaScript Tutorial is designed to help both beginners and experienced professionals master the fundamentals of JavaScript and unleash their creativity to build powerful web applications. From basic syntax and data types to advanced topics such as object-oriented programming and DOM manipulation. </ div > </ div > < script src = "index.js" ></ script > </ body > </ html > |
CSS
.tab-content.active { display : block ; } .tab:not(:hover) { /* Back to Original background color on mouse remove */ background-color : #10B981 ; } |
Output:
Contact Us