Question

我目前正在使用像code-header-panel，paper-tabs等聚合物元素制作网站。

我的标记中有多个<section>标记，我希望在特定的paper-tab次点击中显示和隐藏。

我的标签的HTML标记：

<paper-tabs selected="0">
        <paper-tab id="name" name="home">Home</paper-tab>
        <paper-tab id="about" name="about">About IEEE</paper-tab>
        <paper-tab id="sbm" name="sbm">IEEE SBM</paper-tab>
        <paper-tab id="committee" name="committee">Committee</paper-tab>
        <paper-tab id="contact" name="contact">Contact Us</paper-tab>
</paper-tabs>

这是我的CSS代码：

section#about{
display: none;
position: absolute;
}

这是我的Javascript / jQuery代码：

$(document).ready(function(){
    var a = "";

    var tabs = document.querySelector('paper-tabs');

    tabs.addEventListener('core-select', function(e) {
        a = this.selected;
        //console.log("Selected: " + tabs.selected);

        if(!e.detail.isSelected){$("section").fadeOut();}
        setTimeout(function(){
            $("section#"+a).fadeIn();
        }, 500);
    }); 
})

现在，当我在Chromium浏览器上测试时，此代码工作正常。点击关于标签后，主页淡出，关于页面淡入。但这在Firefox中根本不起作用。主页部分淡出但约未显示任何内容。

我已尝试.fadeIn()，.show()，.addClass()，但无济于事。我该怎么办？

感谢您的帮助。

Answer 1

我的坏。我的错误是我的paper-tab元素和section元素具有相同ID名称的面孔。将section的所有ID更改为类并且它有效。对不起新手的错误。

Firefox css显示问题

1 个答案: