我可以打开未选择默认选项卡的新窗口（网页）吗？

Question

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?

Answer 1

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> 

Answer 2

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.