CODEWITHSUNDEEP
javascripthtmlcss
Centell
Centell

Reputation: 409

Can I open a new window(web page) who not default tab selected

enter image description here

For example, assuming that the same tab as the above image exists, the 'Active' tab is specified as default.

However, my client wishes to keep this default option and open a new window that different tab will selected.(second 'Link' tab or something.)

Is this possible? If it can, how to do this?

Upvotes: 0

Views: 69

Answers (2)

Choxmi
Choxmi

Reputation: 1664

Assuming that you have div contains tab contents.

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
    <a class="nav-link" id="link1" data-toggle="tab" href="?section=tab1">Tab 1</a>
</li>
<li class="nav-item">
    <a class="nav-link" id="link2" data-toggle="tab" href="?section=tab2">Tab 2</a>
</li></ul>

Pass your div id as parameter section as href of li.

<div id="tab1">
</div>
<div id="tab2">
</div>

Then get the parameter, and scroll manually to the div.

<script>
    const params = new URLSearchParams(window.location.search);
    const section = params.get('section');

    if(section!=''){
        $('#' + section).addClass('active');
        $('html, body').animate({
            scrollTop: $('#' + section).offset().top
        }, 2000);
    }else{
        //Default tab here
        $('#tab1').addClass('active');
        $('html, body').animate({
            scrollTop: $('#tab1').offset().top
        }, 2000);
    }
</script>

Hope this would help.

Upvotes: 1

Nikhil Kinkar
Nikhil Kinkar

Reputation: 781

assuming you are using Bootstrap, you can remove all the attributes related to tab behavior from the a.nav-link and instead use target:"_blank". Here in bellow example I have made added the New Page tab, there I have removed all the extra attributes and added target attribute.

This example may not work within this snippet since it is within the nested frame, and opening the _blank tab from nested tab would be messy, but it works on web page I have tested it.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="https://stackoverflow.com/" target="_blank">New Page</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Page</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Page</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Page</div>
</div>

Upvotes: 1

Related Questions