<div class="page1">
  Страница1
  <div><a href="/page?filter=f1">Фильтр1</a></div>
  <div><a href="/page?filter=f2">Фильтр2</a></div>
   <div><a href="/page?filter=f3">Фильтр3</a></div>
</div>

<div class="filterblock">
page.html

  <?php

$style = isset($_GET['filter']) ? $_GET['filter'] : '';
?> 
  
                <ul class="nav nav-tabs">
                  <li class="nav-item"><a class="nav-link <?php if($filter=='f1' ) echo 'active'; ?>" href="#tab1" data-toggle="tab"></a>TAB1</li>
                  <li class="nav-item"><a class="nav-link <?php if($filter=='f2' ) echo 'active'; ?>" href="#tab2" data-toggle="tab"></a>TAB2</li>
                  <li class="nav-item <?php if($filter=='f3' ) echo 'active'; ?>"><a class="nav-link" href="#tab3" data-toggle="tab"></a>TAB3</li>
  </ul>
  
<div class="tab-content">

<div class="tab-pane nav-item fade show active" id="tab1">First</div>
  
  <div class="tab-pane nav-item fade" id="tab2">Second</div>
    <div class="tab-pane nav-item fade" id="tab3">Third</div>
  </div>
    </div>
                 


.page1, page2{
  float: left;
  margin: 0 100px;
}

.filterblock{
  margin-top: 100px;
  width: 200px;
}

.nav-tabs{
  background: #888;
}

.nav-item{
  width: 33%;
}

.tab-content{
  border: 1px solid #888;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js