Html 垂直选项卡在激活时向上拉页面

我用bootstrap为我的网站制作了一些垂直标签

我希望选项卡标题下的一些文本仅在选项卡处于活动状态时显示

我做到了，唯一的问题是，当我从标签1更改为标签3时，页面内容被拉起

有没有一种方法可以在不打开页面的情况下实现这一点

例如：

.filler{
背景：青色；
高度：600px；
}
.导航药片.导航链接.选项卡\u字幕\u隐藏{
字体大小：16px！重要；
可见性：隐藏；
身高：0；
不透明度：0；
过渡：不透明度0.3s；
}           
.nav药丸.nav-link.active.tab\u字幕\u隐藏{
颜色：#fff；
能见度：可见；
高度：自动；
不透明度：1；
过渡：不透明度0.3s；
}

你好，世界
..0
1.
2.

在本例中，您必须定义内容包装的最大高度.nav链接

下面是一个例子-

你好，世界
..0
1.
2.

我不明白你说的“把页面拉上去”是什么意思。我看到的只是一个水平滚动条，因为您没有用行包装容器（“.container fluid”）。首先谢谢你的回复，我会尽力解释清楚的。要体验我在说什么，请使用第一个选项卡滚动到页面的末尾，然后选择最后一个选项卡，然后再选择最后一个选项卡。你不能使用滚动条向下滚动吗？嗯，我可以，只是想知道是否有办法避免这种情况，例如，如果用户在每个选项卡上单击多次。

body{
  padding-bottom:20px;
}
.nav-link.active{
   max-height:500px;
  margin-bottom:0px;
}
.nav-link{
  max-height:0px;
  margin-bottom:50px;
}
.filler {
  background: cyan;
  height: 600px;
}

.nav-pills .nav-link .tab_subtitle_hide {
  font-size: 16px !important;
  visibility: hidden;
  max-height: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav-pills .nav-link.active .tab_subtitle_hide {
  color: #fff;
  visibility: visible;
  max-height: 600px;
  opacity: 1;
  transition: opacity 0.3s ease;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="filler">Hello world</div>

<div class="row">
    <div class="col-3 nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <a class="nav-link active" id="v-pills-for-teams-tab" data-toggle="pill" href="#v-pills-for-teams" role="tab"
            aria-controls="v-pills-for-teams" aria-selected="false"><i class="tab_i fad fa-users-class"></i>
            <div class="tab_content">For Teams
                <!--<br><div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to structure users.</div>-->
            </div>
            <div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to structure
                users.</div>
        </a>

        <a class="nav-link" id="v-pills-for-small-business-tab" data-toggle="pill" href="#v-pills-for-small-business"
            role="tab" aria-controls="v-pills-for-small-business" aria-selected="false"><i
                class="tab_i fad fa-store"></i>
            <div class="tab_content">For small business
                <!--<br><div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to structure users.</div>-->
            </div>
            <div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to structure
                users.</div>
        </a>

        <a class="nav-link" id="v-pills-for-enterprise-tab" data-toggle="pill" href="#v-pills-for-enterprise"
            role="tab" aria-controls="v-pills-for-enterprise" aria-selected="true" style="
    /* padding: 0 !important; */
">
            <div class="tab_content"><i class="tab_i fad fa-building"></i><span class="multi-company">For enterprise</span><br></div>
            <div class="tab_subtitle_hide">Similar to a hierarchical organization, Dummy text allows you to structure
                users.</div>
        </a>
    </div>

    <div class="col-9 tab-content" id="v-pills-tabContent">
        <div class="tab-pane active show" id="v-pills-for-teams" role="tabpanel" aria-labelledby="v-pills-for-teams-tab">
            <!--Inicio sub-tab1-->..0
            <!--Fim sub-tab1-->
        </div>

        <div class="tab-pane" id="v-pills-for-small-business" role="tabpanel"
            aria-labelledby="v-pills-for-small-business-tab">
            <!--Inicio sub-tab2-->..1
            <!--Fim sub-tab2-->
        </div>


        <div class="tab-pane" id="v-pills-for-enterprise" role="tabpanel"
            aria-labelledby="v-pills-for-enterprise-tab">
            <!--Inicio sub-tab3-->..2
            <!--Fim sub-tab3-->
        </div>

    </div>

</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>