Easy Tabs插件,始终滚动到顶部

时间:2014-01-21 11:36:47

标签: javascript jquery html css

您好我在我的网站上使用Jquery EasyTabs插件,请按照在线Jquery EasyTabs plugin的说明操作。看起来工作得很好;但是,当我点击每个标签时,它总是像“#tap1'#tap1'与demo不同。我还检查了所需的js,css和jquery文件的include路径,它们已经是正确的。 这是它所需的js和css文件

<script type='text/javascript' src='style/jquery.js'></script>
<script src="style/jquery.hashchange.js" type="text/javascript"></script>
<script src="style/jquery.easytabs.js" type="text/javascript"></script>
<link href="style/tabs.css" rel="stylesheet" type="text/css">

这些是我的标签HTML

        <!-- TABS -->
<div id='e-tabs' style='width:720px;height:auto;float:left;'>
            <div id="tab-container" class="tab-container">
          <ul class='etabs'>
            <li class='tab'><a href="#tabs1-html">Fatures</a></li>
            <li class='tab'><a href="#tabs1-js">Most Recent</a></li>
            <li class='tab'><a href="#tabs1-css">Most Popular</a></li>
          </ul>
          <div id="tabs1-html">
<!--            <h2>HTML Markup for these tabs</h2> -->
                <!-- content -->
                <div id='space'></div>
                    <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
          </div>
          <div id="tabs1-js">
        <!--        <h2>JS for these tabs</h2> -->
                <!-- content -->

                    <div id='space'></div>
                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>


          </div>
          <div id="tabs1-css">
        <!--    <h2>CSS Styles for these tabs</h2> -->
            <!-- content -->
            <div id='space'></div>
                <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
                                        <div id='ads'>
                    <img src='ads-image\1.jpg'>
                    <div id='ads-title'><h4>Car for Sale</h4></div>
                    <div id='ads-price'><p>500$</p></div>
                    </div>
          </div>
        </div>
</div>
        <!-- TABS -->

任何人都可以帮助我吗? 如果您需要更多信息,请告诉我们,谢谢

1 个答案:

答案 0 :(得分:1)

我在Google Chrome 39中遇到了同样的问题,但在Firefox或Safari中却没有。

问题是当location.hash更新时,Google Chrome 39会跳转到带有哈希值的元素。

您可以通过修改jquery.easytabs.js版本3.2.0来使用history.pushState({}, "", newHash)而不是location.hash = newHash来更新哈希,从而解决此问题。 这pull request已经为你做了。