JQuery UI菜单幻灯片

时间:2013-11-14 19:28:59

标签: javascript jquery html jquery-ui slide

当用户点击我的不同导航链接时,我试图通过将内容滑出页面来改变我的页面内容。到目前为止,我可以从我的主页和我的其他页面之一滑动工作正常。但我不知道如何滑回第一页。

我用来滑动到第一页的脚本:

        <script>
            function slide(div)
            {
                if(div == "work")
                {
                    $('#home').hide('slide', {direction: 'left'}, 1000);
                    $('#work').delay(600).show('slide', {direction: 'right'}, 1000); 
                }
            }
        </script>

我随导航菜单一起滑动的内容:

        <div class='nav'>
            <table class='nav'>
                <tr>
                    <td width='23%'><a href='index.html' onclick='slide("home");' class='link'>home</a></td>
                    <td width='23%'><a href='#' onclick='slide("work");' class='link'>work</a></td>
                    <td width='23%'><a href='#' class='link'>about</a></td>
                    <td width='31%'><a href='#' class='link'>contact</a></td>
                </tr>
            </table>
        </div>
        <div class='content' id='home'>
            <h1>hello</h1>
            <table class='content'>
                <tr>
                    <td><img src='images/icon1.png' class='icon'></td>
                    <td><p>i’m thobias nordgaard. a front and back end<br>
                    developer from denmark. i love what i do,<br>
                    hopefully you will too.<br><br>

                    Im fluid in html, css, php and improving in<br> 
                    javascript, jquery and sass. if you dont know<br>
                    what these things are, all they mean is: i can<br>
                    make websites.</p></td>
                </tr>
            </table>
        </div>

        <div class='content' id='work'>
            <h1>work</h1>
            <table class='content'>
                <tr>
                    <td><img src='images/icon1.png' class='icon'></td>
                    <td><p>I haven't completed any work yet :(</p></td>
                </tr>
            </table>
        </div>

1 个答案:

答案 0 :(得分:0)

修正了它。我已将第一个链接导航到首页,因此当您按下页面时页面会刷新。导致脚本无法运行:)