CSS制作选项卡栏

我正在制作一个选项卡栏,按下适当的选项卡按钮(如web浏览器)可以通过更改每个元素的可见性属性来显示相应的元素。但是这些元素不会出现在工具栏的正下方,如果不是第一个按钮,它们会向下移动。这是因为可见性不影响布局,并且项目是一个接一个写的。我希望他们都出现在顶部。我不能删除它们,因为它们有javascript财产,如果它们不能100%填充容器,我就不能绝对定位它们。你会怎么做

HTML格式

<tab-view id="tabView">
                <tab-bar></tab-bar>

                <tab-content>
                    <!-- First tab-content will show on page load -->
                    <tab-item data-title="Meat Pizzas">
                        <circular-view id="exampleView" data-object-class="exampleObject" data-autoloop-interval="1000 ">
                            <circular-object data-icon="Resources/ExamplePizza.png">0</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">1</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">2</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">3</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">4</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">5</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">6</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">7</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">8</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">9</circular-object>
                            <circular-object data-icon="Resources/ExamplePizza.png">10</circular-object>
                            <!-- Last object in the list is the
                first to be featured on page load -->
                        </circular-view>
                    </tab-item>

                    <tab-item data-title="Second Thing">
                        <div style="width:100%; height:100%; background-color:gray;">
                            hi
                        </div>
                    </tab-item>

                    <tab-item data-title="Third Thing">
                        <div style="width:100%; height:100%; background-color:gray;">
                            hi
                        </div>
                    </tab-item>
                </tab-content>


            </tab-view>

按钮按下

tabViewToBe.tabButtonPressed = function (title) {
            //Deselect all except one that was clicked and show the right item
            for (var a in tabViewToBe.bar.buttons) {
                var wasClicked = $(tabViewToBe.bar.buttons[a]).html() == title,
                    b = tabViewToBe.bar.buttons[a];
                if (wasClicked === false) {
                    b.deselect();
                    $(tabViewToBe.items[a]).css("display", "none"); //Used to be visibility, I was messing around with stuff
                } else {
                    b.select();
                    $(tabViewToBe.items[a]).css("display", "block");
                }
            }
        };

更多详情:

抱歉,这里的问题是,使用显示器,我将根据其大小设置一个选项卡项的动画。但当 display: none 它无法获得大小,所以当我向后移动时,所有对象都在左上角。我不能删除对象,也不能仅使用可见性