javascript - CSS制作标签栏

Question

我正在制作一个标签栏，在其中按下适当的标签按钮(如网络浏览器)通过更改每个元素的可见性属性来显示适当的元素。但是元素不会出现在栏的正下方，如果不是第一个按钮，它们会向下移动。这是因为可见性不影响布局，元素是一个接一个地写的。我希望它们都出现在顶部。我无法删除它们，因为它们具有 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 时，它无法获得大小，所以当我向后移动时，所有对象都在左上角。我不能删除对象，也不能只使用可见性

Answer 1

我通过使用相对位置并将第二个、第三个等元素的负值移动到正确的位置来修复它。