The following code will create a series of tabbed sections on a single page. Each tabbed section will have a series of boxes that contain links to various websites.<\/p>\n
Set up the tabs and box containers:<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Tabbed Web Page<\/title>\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n<div class=\"tabs\">\r\n <div id=\"buttoncontainer\">\r\n <button class=\"tablink active\" onclick=\"openTab(event, 'Tab1')\">Tab 1<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab2')\">Tab 2<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab3')\">Tab 3<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab4')\">Tab 4<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab5')\">Tab 5<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab6')\">Tab 6<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab7')\">Tab 7<\/button>\r\n <button class=\"tablink\" onclick=\"openTab(event, 'Tab8')\">Tab 8<\/button>\r\n<\/div><!--END ButtonContainer-->\r\n\t<div id=\"SearchForm\">\r\n\t\t<form action=\"https:\/\/www.bing.com\/search\" method=\"get\" onsubmit=\"return AddressSearchCheck()\">\r\n\t\t<input type=\"text\" name=\"q\" value=\"\" placeholder=\"Search Term\" id=\"SearchField\"><input type=\"Submit\" value=\"Search\">\r\n\t\t<\/form>\r\n\t<\/div><!--END searchform-->\r\n<\/div><!--END tabs-->\r\n\r\n<div id=\"Tab1\" class=\"tabcontent\">\r\n <div class=\"box-container\">\r\n <a href=\"https:\/\/www.example1.com\" class=\"box\">\r\n <img src=\"icon1.png\" alt=\"Icon 1\">\r\n <\/a>\r\n <a href=\"https:\/\/www.example2.com\" class=\"box\">\r\n <img src=\"icon2.png\" alt=\"Icon 2\">\r\n <\/a>\r\n <!-- Add more boxes as needed -->\r\n <\/div>\r\n<\/div>\r\n\r\n<div id=\"Tab2\" class=\"tabcontent\">\r\n <div class=\"box-container\">\r\n <a href=\"https:\/\/www.example3.com\" class=\"box\">\r\n <img src=\"icon3.png\" alt=\"Icon 3\">\r\n <\/a>\r\n <a href=\"https:\/\/www.example4.com\" class=\"box\">\r\n <img src=\"icon4.png\" alt=\"Icon 4\">\r\n <\/a>\r\n <!-- Add more boxes as needed -->\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- Repeat for other tabs -->\r\n<\/div>\r\n\t\t<script src=\"script.js\"><\/script>\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n\r\n<\/code><\/pre>\nThe following CSS (styles.css) will style the tabs and boxes:<\/p>\n
\r\nbody {\r\n font-family: Arial, sans-serif;\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n justify-content: space-around;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.tablink {\r\n padding: 10px 20px;\r\n background-color: #f1f1f1;\r\n border: none;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n.tablink:hover {\r\n background-color: #ddd;\r\n}\r\n\r\n\/* Style for the active tab *\/\r\n.tablink.active {\r\n background-color: #4CAF50; \/* Change this to your desired active tab color *\/\r\n color: white; \/* Optional: Change the text color of the active tab *\/\r\n}\r\n\r\n.tabcontent {\r\n display: none;\r\n padding: 20px;\r\n border: 1px solid #ccc;\r\n}\r\n\r\n.tabcontent .box-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start; \/* Align boxes to the left *\/\r\n}\r\n\r\n.box {\r\n width: 300px;\r\n height: 300px;\r\n margin: 15px;\r\n padding: 20px;\r\n border: 2px solid grey;\r\n border-radius: 10px;\r\n text-align: center;\r\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.3s;\r\n text-decoration: none; \/* Remove underline for the link *\/\r\n color: inherit; \/* Inherit the text color *\/\r\n}\r\n\r\n.box img {\r\n max-width: 100px;\r\n max-height: 100px;\r\n display: block;\r\n}\r\n\r\n.box:hover {\r\n transform: scale(1.05);\r\n border-color: #000; \/* Optional: change border color on hover *\/\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .box {\r\n width: 100%;\r\n margin: 10px 0;\r\n }\r\n}\r\n<\/code><\/pre>\nThe following JavaScript (script.js) will open the clicked tabbed, load the tab from the queryString<\/p>\n
\r\n\/\/ Function to open a tab\r\nfunction openTab(evt, tabName) {\r\n var i, tabcontent, tablinks;\r\n\r\n \/\/ Hide all tab content\r\n tabcontent = document.getElementsByClassName(\"tabcontent\");\r\n for (i = 0; i < tabcontent.length; i++) {\r\n tabcontent[i].style.display = \"none\";\r\n }\r\n\r\n \/\/ Remove the active class from all tabs\r\n tablinks = document.getElementsByClassName(\"tablinks\");\r\n for (i = 0; i < tablinks.length; i++) {\r\n tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\r\n }\r\n\r\n \/\/ Show the current tab and add an active class to the clicked tab\r\n document.getElementById(tabName).style.display = \"block\";\r\n evt.currentTarget.className += \" active\";\r\n\t\r\n\tTabbyText = evt.currentTarget.innerHTML;\r\n\tdocument.getElementById(\"TabName\").innerHTML = TabbyText;\r\n\tdocument.title = TabbyText;\r\n}\r\n\r\n\/\/ Function to open a specific tab based on the query string\r\nfunction openTabFromQueryString() {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const tabName = urlParams.get('tab');\r\n if (tabName) {\r\n const tabButton = document.querySelector(`button[onclick=\"openTab(event, '${tabName}')\"]`);\r\n if (tabButton) {\r\n tabButton.click();\r\n }\r\n } else {\r\n \/\/ Open the first tab by default if no query string is provided\r\n document.querySelector('.tab button').click();\r\n }\r\n}\r\n\r\n\/\/ Add tooltips to all boxes with a data-tooltip attribute\r\ndocument.querySelectorAll('.box').forEach(function(box) {\r\n var tooltipText = box.getAttribute('data-tooltip');\r\n \r\n if (tooltipText) {\r\n \/\/ Create the tooltip element\r\n var tooltip = document.createElement('div');\r\n tooltip.className = 'tooltip';\r\n tooltip.textContent = tooltipText;\r\n \r\n \/\/ Append the tooltip to the box\r\n box.appendChild(tooltip);\r\n }\r\n});\r\n\r\nfunction AddressSearchCheck() {\r\n \/\/ Get Search Field Contents\r\n const searchField = document.getElementById(\"SearchField\");\r\n let SearchText = searchField.value.trim(); \/\/ Trim whitespace\r\n\r\n if (SearchText === '') {\r\n alert('Enter some text you muppet');\r\n return false;\r\n } else {\r\n \/\/ Normalize the text for easier comparison\r\n let normalizedSearchText = SearchText.toLowerCase();\r\n\r\n \/\/ Check if it contains '.co' (assuming it's a URL if it does)\r\n const isURL = \/\\.(co|net|org)\/.test(normalizedSearchText);\r\n\r\n if (isURL) {\r\n \/\/ Check if it already starts with 'http:\/\/' or 'https:\/\/'\r\n const isHTTPS = normalizedSearchText.startsWith('https:\/\/');\r\n const isHTTP = normalizedSearchText.startsWith('http:\/\/');\r\n\r\n \/\/ If the input doesn't start with 'http:\/\/' or 'https:\/\/', prepend 'https:\/\/'\r\n if (!isHTTPS && !isHTTP) {\r\n normalizedSearchText = 'https:\/\/' + SearchText;\r\n } else {\r\n \/\/ Use the original text with the correct case\r\n normalizedSearchText = SearchText;\r\n }\r\n\r\n \/\/ Redirect to the URL\r\n window.location.href = normalizedSearchText;\r\n } else {\r\n \/\/ Handle search term (e.g., redirect to Google search or another search engine)\r\n \/\/window.location.href = 'https:\/\/www.google.com\/search?q=' + encodeURIComponent(SearchText);\r\n\t\t\treturn true;\r\n }\r\n\r\n \/\/ Return false to stop further processing (optional)\r\n return false;\r\n }\r\n}\r\n\r\n\r\nwindow.onload = function() {\r\n \/\/ Call the function to open the correct tab based on the query string\r\n openTabFromQueryString();\r\n\r\n \/\/ Focus on the search field\r\n const searchField = document.getElementById(\"SearchField\");\r\n if (searchField) {\r\n searchField.focus();\r\n }\r\n};\r\n\r\n\r\n\r\n\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"The following code will create a series of tabbed sections on a single page. Each tabbed section will have a series of boxes that contain […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,46],"tags":[],"class_list":["post-225","post","type-post","status-publish","format-standard","hentry","category-html","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":0,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kwwd.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}