Tabbed Navigation With QueryString Open Tab Selection

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.

Set up the tabs and box containers:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Web Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
    <div id="buttoncontainer">
    <button class="tablink active" onclick="openTab(event, 'Tab1')">Tab 1</button>
    <button class="tablink" onclick="openTab(event, 'Tab2')">Tab 2</button>
    <button class="tablink" onclick="openTab(event, 'Tab3')">Tab 3</button>
    <button class="tablink" onclick="openTab(event, 'Tab4')">Tab 4</button>
    <button class="tablink" onclick="openTab(event, 'Tab5')">Tab 5</button>
    <button class="tablink" onclick="openTab(event, 'Tab6')">Tab 6</button>
    <button class="tablink" onclick="openTab(event, 'Tab7')">Tab 7</button>
    <button class="tablink" onclick="openTab(event, 'Tab8')">Tab 8</button>
</div><!--END ButtonContainer-->
	<div id="SearchForm">
		<form action="https://www.bing.com/search" method="get" onsubmit="return AddressSearchCheck()">
		<input type="text" name="q" value="" placeholder="Search Term" id="SearchField"><input type="Submit" value="Search">
		</form>
	</div>&lt!--END searchform-->
</div><!--END tabs-->

<div id="Tab1" class="tabcontent">
    <div class="box-container">
        <a href="https://www.example1.com" class="box">
            <img src="icon1.png" alt="Icon 1">
        </a>
        <a href="https://www.example2.com" class="box">
            <img src="icon2.png" alt="Icon 2">
        </a>
        <!-- Add more boxes as needed -->
    </div>
</div>

<div id="Tab2" class="tabcontent">
    <div class="box-container">
        <a href="https://www.example3.com" class="box">
            <img src="icon3.png" alt="Icon 3">
        </a>
        <a href="https://www.example4.com" class="box">
            <img src="icon4.png" alt="Icon 4">
        </a>
        <!-- Add more boxes as needed -->
    </div>
</div>

<!-- Repeat for other tabs -->
</div>
		<script src="script.js"></script>
	</body>
	</html>

The following CSS (styles.css) will style the tabs and boxes:


body {
    font-family: Arial, sans-serif;
}

.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tablink {
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tablink:hover {
    background-color: #ddd;
}

/* Style for the active tab */
.tablink.active {
    background-color: #4CAF50; /* Change this to your desired active tab color */
    color: white; /* Optional: Change the text color of the active tab */
}

.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
}

.tabcontent .box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align boxes to the left */
}

.box {
    width: 300px;
    height: 300px;
    margin: 15px;
    padding: 20px;
    border: 2px solid grey;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    text-decoration: none; /* Remove underline for the link */
    color: inherit; /* Inherit the text color */
}

.box img {
    max-width: 100px;
    max-height: 100px;
    display: block;
}

.box:hover {
    transform: scale(1.05);
    border-color: #000; /* Optional: change border color on hover */
}

@media (max-width: 768px) {
    .box {
        width: 100%;
        margin: 10px 0;
    }
}

The following JavaScript (script.js) will open the clicked tabbed, load the tab from the queryString


// Function to open a tab
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    // Hide all tab content
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Remove the active class from all tabs
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab and add an active class to the clicked tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
	
	TabbyText = evt.currentTarget.innerHTML;
	document.getElementById("TabName").innerHTML = TabbyText;
	document.title = TabbyText;
}

// Function to open a specific tab based on the query string
function openTabFromQueryString() {
    const urlParams = new URLSearchParams(window.location.search);
    const tabName = urlParams.get('tab');
    if (tabName) {
        const tabButton = document.querySelector(`button[onclick="openTab(event, '${tabName}')"]`);
        if (tabButton) {
            tabButton.click();
        }
    } else {
        // Open the first tab by default if no query string is provided
        document.querySelector('.tab button').click();
    }
}

// Add tooltips to all boxes with a data-tooltip attribute
document.querySelectorAll('.box').forEach(function(box) {
    var tooltipText = box.getAttribute('data-tooltip');
    
    if (tooltipText) {
        // Create the tooltip element
        var tooltip = document.createElement('div');
        tooltip.className = 'tooltip';
        tooltip.textContent = tooltipText;
        
        // Append the tooltip to the box
        box.appendChild(tooltip);
    }
});

function AddressSearchCheck() {
    // Get Search Field Contents
    const searchField = document.getElementById("SearchField");
    let SearchText = searchField.value.trim();  // Trim whitespace

    if (SearchText === '') {
        alert('Enter some text you muppet');
        return false;
    } else {
        // Normalize the text for easier comparison
        let normalizedSearchText = SearchText.toLowerCase();

        // Check if it contains '.co' (assuming it's a URL if it does)
        const isURL = /\.(co|net|org)/.test(normalizedSearchText);

        if (isURL) {
            // Check if it already starts with 'http://' or 'https://'
            const isHTTPS = normalizedSearchText.startsWith('https://');
            const isHTTP = normalizedSearchText.startsWith('http://');

            // If the input doesn't start with 'http://' or 'https://', prepend 'https://'
            if (!isHTTPS && !isHTTP) {
                normalizedSearchText = 'https://' + SearchText;
            } else {
                // Use the original text with the correct case
                normalizedSearchText = SearchText;
            }

            // Redirect to the URL
            window.location.href = normalizedSearchText;
        } else {
            // Handle search term (e.g., redirect to Google search or another search engine)
            //window.location.href = 'https://www.google.com/search?q=' + encodeURIComponent(SearchText);
			return true;
        }

        // Return false to stop further processing (optional)
        return false;
    }
}


window.onload = function() {
    // Call the function to open the correct tab based on the query string
    openTabFromQueryString();

    // Focus on the search field
    const searchField = document.getElementById("SearchField");
    if (searchField) {
        searchField.focus();
    }
};

Disclaimer: The code on this website is provided "as is" and comes with no warranty. The author of this website does not accept any responsibility for issues arising from the use of code on this website. Before making any significant changes, ensure you take a backup of all files and do not work directly on a live/production website without thoughly testing your changes first.

Tabbed Navigation With QueryString Open Tab Selection

Leave a Reply Cancel reply