How to translate by anchor on taboo bootstrap?

Question

JavaScript

Hello, I'm using bootstrap 3.3.6.
There was a task to switch to a specific taboo by anchor, for some reason none of the found solutions work

<ul class="nav nav-pills fix-pills st-pills">
        <li class="active"><a data-toggle="pill" style="color:#000;background-color:#fff;" href="#package1">Раздел</a></li>
        <li class=""><a data-toggle="pill" style="color:#000;background-color:#fff;" href="#package2">Раздел</a></li>
        <li class=""><a data-toggle="pill" style="color:#000;background-color:#fff;" href="#package3">Раздел</a></li>
    </ul>
<div class="tab-content">
    <div id="package1" class="tab-pane fade in active"> </div>
    <div id="package2" class="tab-pane fade"> </div>
    <div id="package3" class="tab-pane fade"> </div>
</div>

Tell me, please, how to solve this problem?

I tried to use this solution but it didn't help

var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');



  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

Answer 1

Do you want it to scroll to the tab? or just changed them when pressed? or...? I change them.

Answer 2

<div id="package1" class="tab-pane fade in active"><a name="package1"><a></div>
<div id="package2" class="tab-pane fade"><a name="package2"><a></div>
<div id="package3" class="tab-pane fade"><a name="package3"><a></div>

Will help?
upd. It came to that they should still open.

$(function() {
    if( var hash = window.location.hash ) {
        $('a[href="#' + hash + ']').tab('show');
    }
});