Question

我正在制作一个标签栏，按下相应的标签按钮（如网络浏览器），通过更改每个元素的可见性属性来显示相应的元素。但是元素不会出现在条形图下方，如果它不是第一个按钮，它们就会向下移动。这是因为可见性不会影响布局，并且项目会一个接一个地写入。我希望他们都出现在顶部。我无法删除它们，因为它们具有javascript属性，并且我无法将它们置于绝对位置，而它们无法用w / h 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

我使用位置相对来修复它，并为第2个，第3个等项目设置负值，将其移动到正确的位置。

CSS制作标签栏

1 个答案: