0

I'm having 3 tabs in register.html page and when I tried to click the button from index.html, i need to show the respective tab.

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 used the below button to open the specific page [Borrower Tab] when I click the same.

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>

It highlights the specific tab but its respective content is not displaying..

Venkat
  • 93
  • 1
  • 1
  • 11
  • 1
    I think documentation already has this https://getbootstrap.com/docs/4.1/components/navs/ – Shubham Srivastava Sep 09 '20 at 06:48
  • Thanks @ShubhamSrivastava.. it will work in the same page... am trying to open the tab when I click the button in other page.. I used the below coding and it is not working for me... `function myFunction() { $('#myTab a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) $('#myTab a[href="#borrower"]').tab('show') // Select tab by name }` ``. Is there anything am missing... – Venkat Sep 09 '20 at 06:57
  • 1
    Your onclick listener on the nav tab will not be invoked unless the user clicks on the tab button. You can get the url parameters on page load and then show the tab according to the url parameter. – Terence Sep 09 '20 at 07:02
  • Thanks @Terence.. can you please explain a little bit with an example or any link on how to pass the url parameters.. – Venkat Sep 09 '20 at 07:05

1 Answers1

1

When the Register.html page loads, retrieve the hash parameter from the URL. How to get the anchor from the URL using jQuery?

Then show the tab according the hash retrieved.

$(window).on('load',function(){
    var hash = window.location.hash.substr(1);
    if(hash === "borrower-tab"){
        $("borrower").tab("show");
    }
    
});
Terence
  • 104
  • 8
  • Thanks for your valuable time.. `var url = "https://sampledemos.online/kisaanpay/register.html#borrower-tab"; var hash = url.substring(url.indexOf("#")+1); $(window).on('load',function(){ var hash = window.location.hash.substr(1); if(hash === "borrower-tab"){ $("borrower").tab("show"); } });` am using the above one.. and when I clicked it goes to the specific tab .. but it respective content is not getting display – Venkat Sep 09 '20 at 07:41