具有相同html的两个页面呈现不同

Question

我有一个页面，你可以在这里访问：

http://beerportfolio.com/beerPortfolio2.php?u=hoppy

页面上的

是一个滑块，它清除我的div并将新数据加载到其中。当我单击滑块后，它应该加载原来的相同数据。当我回到原始页面时，它会执行此操作但将其格式化为错误。

在原始页面加载：

然后点击滑块然后回来：

奇怪的是，当我查看每个页面的html源代码时，它们对我来说看起来完全一样。

我用js函数完成所有这一切，使用jquery load调用php脚本将每个新页面加载到div中。

Answer 1

您的HTML之前和之后并不完全相同。

使用类似Chrome开发者工具的内容并检查元素而不是查看来源。通常，当页面通过Javascript更改时，“查看源代码”的结果不会更新。

在：

<div id="beerPortfolio">
 <div class="row">
                <div class="span3">
                    <div id="drop1">        <select id="dropOneMike" onchange="getDrop2Mike(5)">            <option value="0">All</option>
                            <option value="1">Alphabetical</option>
                            <option value="2">Brewery</option>
                            <option value="4">Rating</option>
                            <option value="3">Style</option>

                        </select>
                    </div>
                </div>
                <div class="span3">
                    <div id="drop2">

                    </div>
                </div>

                <div class="span3">

                </div>


            </div>
            <br>

后：

<div id="beerPortfolio">        <select id="dropOneMike" onchange="getDrop2Mike(5)">            <option value="0">All</option>
                            <option value="1">Alphabetical</option>
                            <option value="2">Brewery</option>
                            <option value="4">Rating</option>
                            <option value="3">Style</option>

                        </select>


                <div class="span3">
                    <div id="drop2">

                    </div>
                </div>

                <div class="span3">

                </div>



            <br>

Answer 2

使用切换使用JavaScript加载内容时，不会加载相同的HTML。您可以使用Google Chrome的inspect元素来判断。只需右键单击要了解详细信息的项目，然后单击“检查元素”。当您单击“查看源”时，它将显示不受JavaScript影响的HTML。

最初呈现页面时，您的菜单就在。当您切换回来时，它就不再存在。