jquery - Firefox css 显示问题

Question

我目前正在使用类似 code-header-panel 的 polymer 元素制作网站, 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 浏览器上测试这段代码时，它工作正常。单击about 选项卡时，home 淡出，about 页面淡入。但这在Firefox 中根本不起作用。 主页 部分淡出，但关于 不显示任何内容。

我试过了 .fadeIn() , .show() , .addClass()但无济于事。我该怎么办？

感谢您的帮助。

Answer 1

我的错。我的错误是我的 paper-tab 元素和 section 元素具有相同的 ID 名称。将 section 的所有 id 更改为类并且它起作用了。对菜鸟的错误感到抱歉。