引导程序选项卡-在不同的内侧打开“ particuler”选项卡，然后单击以跳转到锚点

Question

Hi all Regarding this post I could solve my problem opening a new page and a particuler tab by using this script

window.onload = function(){  

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

//Change hash for page-reload
$('.nav-tabs a[href=#' + url.split('#')[1] + ']').on('shown', function (e) {
    window.location.hash = e.target.hash;
}); 

}

The link looks like this

index.php?content=seminare#wppp

I'm using a php include function. In this case I include seminare.php into index.php and open tab WPPP.

The code of the tabs look like this

<ul class="nav nav-tabs responsive-tabs">
    <li class="active">
       <a data-toggle="tab" href="#monitor"><i class="fa fa-circle" aria-hidden="true"></i>Monitor</a>
    </li>
    <li>
       <a data-toggle="tab" href="#wppp"><i class="fa fa-circle" aria-hidden="true"></i>WPPP</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade in active" id="monitor">
        content 1
    </div><!-- tab-group -->

    <div class="tab-pane fade in" id="wppp">
        content 2
    </div><!-- tab-group -->
</div>

By now I end up on the top of the page without the focus on the open tab. So I have to scroll down to the tab. How can I manage to jump to the tab area as well as like the normal anchor functionality?

Thanks guys.

Answer 1

I'd use jQuery to do this easily:

$(function() {
  $(document).scrollTop( $("#wppp").offset().top );
});

But make sure its visible though.

Answer 2

Problem solved. Because the particuler div was hidden it couldn't work.

 if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
    $('#' + url.split('#')[1]).addClass('active');
}

Add class 'active' and it works