Remember Tabs

Developer
Joseph Cha
Size
2,179 Kb
Views
6,072
  1. Remember Tabs Previews
  2. Remember Tabs HTML Codes
  3. Remember Tabs CSS Codes
  4. Remember Tabs JS Codes

How do I make an remember tabs?

What is a remember tabs? How do you make a remember tabs? This script and codes were developed by Joseph Cha on 05 January 2023, Thursday.

Remember Tabs Previews
IQ Test

Remember Tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Remember Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="tabs"> <div class="tab_heading" aria-controls="panel1" aria-selected="true">Tab 1</div> <div class="tab_heading" aria-controls="panel2" aria-selected="false">Tab 2</div> <div class="tab_heading" aria-controls="panel3" aria-selected="false">Tab 3</div> <div class="clear"></div> <div id="panel1" class="tab_panel" aria-hidden="false">Tab 1 Content</div> <div id="panel2" class="tab_panel" aria-hidden="true">Tab 2 Content</div> <div id="panel3" class="tab_panel" aria-hidden="true">Tab 3 Content</div> </div> <script src="js/index.js"></script>
</body>
</html>

Remember Tabs - Script Codes CSS Codes

 * { box-sizing: border-box; } .tab_heading { float: left; border: 1px solid black; padding: 10px; cursor: pointer; width: 100px; } .clear { clear: both; } .tab_panel { width: 300px; border: 1px solid black; padding: 10px; } div[aria-hidden="true"] { display: none; }

Remember Tabs - Script Codes JS Codes

(function() { 'use strict'; var tabs = document.getElementById("tabs"); var tabPanels = document.querySelectorAll('.tab_panel'); var tabHeadings = document.querySelectorAll('.tab_heading'); var tabPanelsArray = [].slice.call(tabPanels); var tabHeadingsArray = [].slice.call(tabHeadings); function checkTabs(target, arr) { arr.forEach(function(currentItem, index, array) { if (currentItem !== target) { currentItem.setAttribute("aria-hidden", true); tabHeadings[index].setAttribute("aria-selected", false); } else { currentItem.setAttribute("aria-hidden", false); tabHeadings[index].setAttribute("aria-selected", true); } }); } function activateTab(event) { var tabTarget = event.target.getAttribute("aria-controls"); var tabTargetPanel = document.querySelector("#" + tabTarget); checkTabs(tabTargetPanel, tabPanelsArray); localStorage.setItem('lastTab', tabTarget); } tabHeadings.forEach(function(currentItem, index, array) { currentItem.addEventListener('click', activateTab); }); if (localStorage.length > 0) { var lastOpenedTab = document.getElementById(localStorage.getItem('lastTab')); checkTabs(lastOpenedTab, tabPanelsArray); }
}());
Remember Tabs - Script Codes
Remember Tabs - Script Codes
Home Page Home
Developer Joseph Cha
Username unionbank
Uploaded January 05, 2023
Rating 3
Size 2,179 Kb
Views 6,072
Do you need developer help for Remember Tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph Cha (unionbank) Script Codes
Name
Mastering HTML Project Assignment
Friends List
HTML5 Semantic Structure
A Pen by Joseph Cha
HTML5 Forms
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!