Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed.

Register.html
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
   <li class="nav-item active">
        <a class="nav-link" id="individual-tab" data-toggle="tab" href="#lender-individual"
                        role="tab" aria-controls="individual" aria-selected="true">Lender Individual</a>
        </li>
    <li class="nav-item">
                    <a class="nav-link" id="orgn-tab" data-toggle="tab" href="#lender-orgn" role="tab"
                        aria-controls="orgn" aria-selected="false">Lender Organization</a>
                </li>
    <li class="nav-item nav nav-tabs">
                    <a class="nav-link" id="borrower-tab" data-toggle="tab" href="#borrower" role="tab"
                        aria-controls="botrrower" aria-selected="false">As <br>Borrower</a>
                </li>
</ul>
<div class="tab-content">
<div id="lender-individual" class="tab-pane fade in active">
-----Form 1-----
</div>
<div id="lender-orgn" class="tab-pane fade">
--------Form 2-----------
</div>
<div id="borrower" class="tab-pane fade">
------Form 3---------------
</div>
</div>

In my Index.html page, I included a button to open the specific [Borrower Tab] when clicked.

Index.html
<button type="button" onclick="window.location.href='/kisaanpay/register.html#borrower-tab';" 
class="btn btn-success"><i class="fa fa-money"></i>&nbsp;&nbsp;&nbsp;Borrower</button>

The specific tab is highlighted but its content is not displaying correctly.

javascripthtmljquerycssbootstrap-4

Answer №1

Upon loading the Register.html page, extract the hash parameter from the URL. Learn how to retrieve the hash from a URL using jQuery.

Afterwards, display the tab based on the extracted hash value.

$(window).on('load',function(){
    var hash = window.location.hash.substr(1);
    if(hash === "borrower-tab"){
        $("borrower").tab("show");
    }
    
});

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

A guide to creating gradient borders using CSS

Does anyone have advice on applying a gradient to a border in CSS? I attempted using the following code: border-color: -moz-linear-gradient(top, #555555, #111111); Unfortunately, it did not work as expected. Can someone share the correct method for creat ...

cssbordergradientlinear-gradients

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

I am currently working with the following code: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=PT+Sans ...

javascripthtmljquerycssreactjs

Tips on adjusting a JavaScript animation function

I'm currently working on adjusting the animation function within the "popup" class that controls the gallery section of a website. When the page loads, an image and background start expanding from zero scale in the center to 100 VIEWPORT HEIGHT (VH) a ...

javascripthtmlcss

Vue - Utilizing child slots in the render method

Within my component, I am working with a default slot and attempting to enhance the layout by wrapping each item in the slot within a div. However, I am facing an issue where I need to retrieve the classes of one of the slot elements, but the VNode element ...

javascriptvue.jsjsx

By increasing the background-color to 100%, the list item obstructs the background image of its parent div

In cases where an element is set to display:block, the background-color of that element typically extends to 100% of the width of its parent element. However, I am seeking a solution where the background-color only reaches the edge of the text, allowing th ...

htmlcss

Arrange items in a particular order

I need help sorting the object below by name. The desired order is 1)balloon 2)term 3)instalment. loanAdjustmentList = [ { "description": "Restructure Option", "name": "instalment", " ...

javascriptangular

Navigating Vue 3's slot attributes: A step-by-step guide

Currently, I am facing an issue with a Vue component named MediaVisual. This component contains a slot. The problem arises when attempting to retrieve the src attribute of the slot element that is passed in. Surprisingly, this.$slots.default shows up as u ...

javascriptvue.js

Issue with mediaelement in Angular 8: video playback does not display after 2 seconds

I'm encountering an issue with MediaElement js when trying to play videos in .m3u8 format within a slider containing multiple videos. Whenever I click on the play button for any video, only a 2-second clip is shown before the video disappears. Any as ...

javascriptangularmediaelementmediaelement.js

Automatic Refresh and Search Functionality on PHP Page

Can anyone help with a problem I'm having trying to implement auto-reload on a page with a table in the form of rows that contain usernames? I am currently using the jQuery searchable plugin from here to search for usernames within the div. The websi ...

javascriptjquery

Is there a way to temporarily halt a jQuery animation for 2 seconds before automatically resuming it, without relying on mouse-over or mouse-out triggers?

With just one scrolling image implemented in jQuery, the logos of clients are displayed continuously in a scrolling box with no pauses. Speed can be adjusted easily, but pausing and then resuming the animation after 2 seconds seems to be a challenge whic ...

javascriptjqueryasp.net-mvcajaxanimation

Implement a fadeout effect by using a timeout function that adds a class to the div element in

I implemented a loader on my webpage that animates for 3 seconds before a function kicks in to modify the styles and make it invisible. I am looking to add a fadeout effect when the 'waa' style is applied to the 'load' div. setTimeou ...

javascripthtmlcss

Mastering the art of transforming JSON data for crafting an exquisite D3 area chart

I often find myself struggling with data manipulation before using D3 for existing models. My current challenge is figuring out the most efficient way to manipulate data in order to create a basic D3 area chart with a time-based x-axis. Initially, I have a ...

javascriptjsond3.jscharts

Using the Slim framework to communicate through JSON

When attempting a simple POST request, I am having trouble reading the JSON data no matter what I try. $.ajax({ url: 'server/account/session', type: 'POST', data: { "username": name, "password": password} , ...

phpjqueryjsonslim

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

javascriptjqueryquery-string

Display all pages in the DataTables plugin while utilizing responsive tables and additional features

I am struggling to combine the responsive and fixed header attributes of my current function with the "Show All" list feature, similar to what is demonstrated in this example: https://datatables.net/examples/advanced_init/length_menu.html I need assistanc ...

javascriptjquerycssdatatables

Chokidar operates smoothly from the command line, but fails to function properly when invoked through the use of 'npm run'

I've implemented a script that monitors Tailwind CSS files using Chokidar. The script works perfectly when I execute the command in the CLI using chokidar 'tailwind.config.js' --initial=true -c 'npm run build-tailwind'. It successf ...

javascriptnode.jsnpmchokidar

Display the same data point on a Google Map from two different rows of a database

I'm looking to display multiple values for profFName and profLName on a map with just one point showing this information. If I have (2) pID connected to the same marker, I want it to show both profFName and profLName on a single point. Currently, it ...

phpjavascript

A comprehensive guide on implementing filtering in AngularJS arrays

I am working with the array provided below: [ { Id: 1, Name: "AI", Capacity: 2, From: "2021-10-27T08:00:00", To: "2021-10-27T08:50:00", }, { Id: 2, Name: "TEST", Capacity: 2, ...

javascriptangularjs

The command is failing to include functionality with the yarg npm package

I have been attempting to incorporate a command using yargs, however, after executing my code, the command does not seem to be added successfully. Below is the snippet of what I am attempting: const yargs = require('yargs') //create add command ...

javascriptnode.jsnpmyargs