Question

我发现我的网站在Chrome（或IE）和Firefox之间存在差异。举个简单的例子，

<style>
.showDiv {
    display: block;
}
.hideDiv {
    display: none;
}
</style>
<script type="text/javascript">
    function displayDiv() {
        $('#div_1').removeClass("hideDiv");
        $('#div_1').addClass("showDiv");
    }
</script>
</head>
<body>
    <ul>
        <li id="div_0" onclick="displayDiv();">Div
            <div id="div_1" class="hideDiv">
                <a href="test2.html">subDiv</a>
            </div>
        </li>
    </ul>
</body>

点击div_0，显示div_1。然后，我单击div_1中的链接以重定向到另一个页面。如果我回到上一页，div_1的CSS样式仍然在Firefox中，但Chrome仍然存在。有人能说出这是什么原因吗？另外，如何修改我的代码以统一两种浏览器的行为（例如让Chrome保留CSS样式或让Firefox更新上一页的CSS样式）？

以下是重定向到test2.html后返回上一页的结果。

适用于Chrome For Chrome 对于FireFox For Firefox

Answer 1

尝试以下方法。单击后隐藏细分

<强> FIDDLE DEMO

<强> HTML

<ul>
    <li id="div_0" onclick="displayDiv()">Div
        <div id="div_1" onclick="hideDiv()" class="hideDiv"> <a href="test2.html">subDiv</a>

        </div>
    </li>
</ul>

<强>的jQuery

 function displayDiv() {
        $('#div_1').removeClass("hideDiv");
        $('#div_1').addClass("showDiv");
    }

    function hideDiv() {
        $('#div_1').removeClass("showDiv");
        $('#div_1').addClass("hideDiv");
    }

返回FireFox中的上一页后，将保存CSS状态

1 个答案: