Can links be integrated into Bootstrap 4 nav-pills tab-panel from another webpage?

I've managed to set up a service page with bootstrap 4's pills .nav-pills navigation, and it's functioning quite well. However, my current challenge involves allowing users to click on a link from the home page that will direct them to a specific tab-panel on the service page. I've been struggling to find a solution for nearly a week now. Any suggestions on how I can achieve this?

Service.html

<div class="nav flex-column nav-pills col-md-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<ul class="list-group list-unstyled">
    <li class="nav-item">
        <a class="nav-link list-group-item" id="v-pills-manpower-tab" data-toggle="pill" href="#v-pills-manpower" role="tab" aria-controls="v-pills-manpower" aria-selected="false">Manpower Supply</a>
    </li>
</ul>
</div>

<div class="tab-content col-md-8" id="v-pills-tabContent">
<div class="tab-pane fade" id="v-pills-manpower" role="tabpanel" aria-labelledby="v-pills-manpower-tab">
    <h5>Man Power Supply</h5>
</div>

Home.html

<a href="services.html#v-pills-manpower" data-toggle="tab" >

Despite multiple attempts, my code in home.html doesn't seem to work as expected.

javascripthtmlcssbootstrap-4

Answer №1

Enhancing the user experience on the home page by utilizing data attributes. I've implemented a data attribute called data-tab-name on the anchor element, which specifies the selected tab for the service page.

Upon loading the page, the onclick function of the link is modified to save the tab name in localStorage before directing the user to the service page.

Home.html

<a href="services.html" data-tab-name="v-pills-manpower" data-toggle="tab" >

    <script type="text/javascript">
    window.onload = function() {
        document.querySelectorAll('[data-toggle="tab"]').forEach(function(item, index){
            item.addEventListener('click', function(e){
                e.preventDefault();
                localStorage.selectedTabName = item.getAttribute('data-tab-name');
                window.location.href = item.href;
            });
        });
    };
</script>

Upon loading the service page, the javascript code retrieves the saved tab name from localStorage, locates the corresponding tab, and activates it by adding the "active" class to the relevant element.

Service.html

<script type="text/javascript">

    window.onload = function() {

        document.querySelectorAll('.nav-link').forEach(function(item, index){
            var isActive = (item.className.indexOf('active')>-1);
            if (item.id==localStorage.selectedTabName) {
                if (!isActive) {
                    item.className += ' active';
                }
                item.setAttribute('aria-selected', 'true');
            } else  {
                item.setAttribute('aria-selected', 'false');
                if (isActive) {
                    item.className = item.className.replace('active', '');
                }
            }
        });

    };

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Newbie inquiry regarding the setup and utilization of Bootstrap

I'm currently working on building a website and I decided to incorporate a bootstrap carousel. Initially, I had a dropdown button in the navbar along with a collapsible menu for smaller viewports which were functioning properly. However, when I added ...

javascripthtmlbootstrap-4cdn

Best Practices for Variable Initialization in Stencil.js

Having just started working with Stencil, I find myself curious about the best practice for initializing variables. In my assessment, there seem to be three potential approaches: 1) @State() private page: Boolean = true; 2) constructor() { this.p ...

javascripttypescriptstenciljs

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the co ...

javascripthtmljquerycsshover

Customize Your AJAX POST URL with Radio Buttons - A Step-by-Step Guide

I'm looking for some guidance on how to use AJAX to change the post URL based on a radio button selection. Do I need to use an if statement or is there another way? var barray = []; function cbutton() { $('input:radio[name="cheking"]:checke ...

javascripthtmljqueryajax

Re-rendering multiple components with the new `use` feature in React version 18.3.0

When trying to fetch and use data using React 18.3.0, I encountered an issue with multiple re-rendering. react: 18.3.0-canary-3ff846d10-20230724 next: 13.4.12 The code for SuspenseTest component is causing multiple console outputs (about 5 to 8 times) be ...

javascriptreactjsnext.js

Compressed search bar when in mobile mode

My search bar is getting squashed on mobile devices. Any suggestions for fixing this issue? <div id="menu" class="py-4 d-flex justify-content-center"> <div class="row "> <div class="col-sm-auto "> ...

htmlbootstrap-4

Installation of 'aerogear-cordova-push' was unsuccessful due to an undefined error

When I run sudo ionic platform add ios, I encounter the following error. I added the 'aerogear-cordova-push' plugin, then removed the platforms and attempted to add them again. Failed to install 'aerogear-cordova-push':undefined Error ...

javascriptioscordovaionic-frameworkaerogear

What is the best way to handle a very large JSON output in Node.js?

Working with shell.js to run unix commands in node.js and using bull for task queuing. The process involves providing an array of tasks: { "tasks": [ { "name": "task1", "command" ...

javascriptnode.jsjsontask

What is the best way to configure FormIt with ModX Revolution to automatically redirect to a specific web page ID, such as www.myurl.com/index.php#contact?

A concern I have is regarding a one-page HTML website I created with multiple sections representing different pages. The issue I'm encountering is related to the FormIt contact form, which is functioning properly but not redirecting to the correct ID ...

jqueryhtmlformsmodx-revolutionformit

Unable to authenticate an HTML form using PHP and Apache 2

In my website's footer, there is a form that I am trying to run using a PHP file located at 127.0.0.1/form.php on localhost. I learned that PHP code inside HTML is commented out, and according to the PHP Documentation, the PHP file needs to be run dir ...

phphtmlapache2

Utilizing jQuery with live content to determine dimensions as required

Within my web application, I have a page that dynamically retrieves a view with both HTML and JavaScript. The JavaScript is responsible for rendering a chart into the retrieved view. The problem arises because the chart library I am utilizing (flot) necess ...

javascriptjquerydynamicflot

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

javascriptjquerycss

Incorporating click functionality into the infoWindow for Google Maps in Vue

In my Vue project, I decided to implement the Google Maps API directly instead of using a library like vue2-google-maps. A colleague advised me against using the library due to performance issues when dealing with a large number of markers. So, I came up ...

javascriptvue.jsvuejs2

Utilizing Bootstrap for Efficient Image Alignment

I'm encountering an issue with my code and I am unsure of how to fix it. The current state of my code is different from the desired outcome https://i.sstatic.net/Ti1kK.jpg As you can see, the image above does not match the appearance of the image I ...

htmlcsstwittertwitter-bootstrap-3

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

A guide on retrieving values from programmatically created input elements in Java

Here's the HTML code that I am currently working with: <form method="get" action="#" id="startForm"> <input type="text" name="period" id="period" placeholder="The number of days"/> <input type="submit" name="submit" value="subm ...

javascripthtmlfor-loopdom

In node.js, how do I generate a MongoDB query using user input?

In my application, I currently store various forum posts where users can add new messages and create new posts. Users have the ability to filter out content from specific users they have previously blocked while viewing the content. Each user is identifie ...

javascriptnode.jsmongodbmongodb-query

Steps for creating an accordion table using Bootstrap 5

I want to create an accordion table similar to the one shown in the screenshot using Bootstrap 5. However, I noticed that my table's width changes after collapsing for some reason. If it's possible to replace the table with a different element, I ...

htmlcsshtml-tableaccordionbootstrap-5

Ensure the position of a DIV is synchronized with the three-dimensional world while hovering over a ThreeJS Object

Is it possible to position a DIV in 2D space on top of a 3D Object in ThreeJs in a way that it moves along with the object when the world rotates? Keep in mind that the 3D Object is loaded from a model, containing nested groups and a mesh. https://i.ssta ...

javascripthtml3dthree.js

The Bootstrap tabs are not correctly displaying the content

Hey there, I'm currently working on a project that involves using bootstrap tabs (BS4) within a form. One of the requirements is to have forward and back buttons for form navigation, and I'd like to leverage BS4's tab('show') fun ...

javascripthtmlcsstwitter-bootstrap