Question

我目前正在构建一个网站，我不希望在单击选项卡并显示内容之前显示滚动条。目前，当我加载页面时，会立即显示滚动条。原因很明显：选项卡中的内容已经加载但在单击相关选项卡之前不会显示。说得通。我想删除该滚动条，直到单击选项卡，无论已加载的内容如何。

这是滚动条的屏幕抓取和未加载的内容。

Content loaded but not shown; scroll bars active

以下是相关代码：

HTML

 <ul class="nav nav-tabs">
        <li><a href="#still" data-toggle="tab">Still</a></li>
        <li><a href="#people" data-toggle="tab">People</a></li>
        <li><a href="#product" data-toggle="tab">Product</a></li>
        <li><a href="#portraits" data-toggle="tab">Portraits</a></li>
        <li><a href="#street" data-toggle="tab">Street</a></li> 
        <li><a href="#iphone" data-toggle="tab">iPhone</a></li>
 </ul>

    <div id="tab-content" class="tab-content">
        <div id="people" class="tab-pane fade active">
            <div class="row">
                <div class="col-sm-12">
                    <img src="portfolio/people/thumbnails/IMG_1632_thumb.jpg">
                    <img src="portfolio/people/thumbnails/IMG_2980_thumb.jpg">                       
                    <img src="portfolio/people/thumbnails/IMG_5960_thumb.jpg">
                    <img src="portfolio/people/thumbnails/IMG_6443_thumb.jpg">
                    <img src="portfolio/people/thumbnails/IMG_6723_thumb.jpg">                     
                </div>
            </div>
        </div>
    </div>

CSS

 /*apply styling to the tab-content*/
.tab-content
{  
    padding-top: 20px;

    margin-left: auto;
    margin-right: auto;
    text-align: center;    
}

/*apply style to the rows in the tab-content*/
.tab-content .row
{
    padding-top: 3px;
    padding-bottom:3px;
}

我承认没有外部库可能没有办法做到这一点，但我想我还是会问以防万一。

Answer 1

如果您使用javascript切换选项卡，则可以在同一个函数上添加css属性。

首先你说身体默认为out_pos.fill(value)。在标签切换功能上，您可以添加以下行：if bool(re.search('item 2', word)): n=re.findall('item 2', word) else: n=re.findall('item 3', word)以显示滚动条

HTML / CSS - 隐藏滚动条直到选中标签并显示内容

1 个答案: