html5如何做到使用导航栏切换页面时不重新加载页面

html-css08

html5如何做到使用导航栏切换页面时不重新加载页面,第1张

我刚开始也在找这个问题的答案,现在解决了,为后面学习的人栽棵树吧。

实现这个功能有很多种方法,这里我选一种个人认为比较简单的方法:

建立三个网页,一个作为主页面,另外两个子页面作为切换页面嵌入主页面,子页面也可以用文字替代。

用jQuery方法来切换页面,语言比较简单网上搜一下看看就懂了

下面附上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>标题</title>

    <!--jQuery 百度CDN库-->

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        // jQuery代码

        $(document).ready(function () {

            $("#b1").click(function () {

                $("#tab_1").show()// 显示

                $("#tab_2").hide()// 隐藏

            })

            $("#b2").click(function () {

                $("#tab_1").hide()

                $("#tab_2").show()

            })

        })

    </script>

</head>

<body>

<div>

    <h1>标题一</h1>

</div>

<div>

    <div>

        <ul>

            <li><button id="b1">菜单1</button></li>

            <li><button id="b2">菜单2</button></li>

        </ul>

    </div>

    <div>

        <div id="tab_1">

            子页面1

        </div>

        <div id="tab_2" style="display: none">

            子页面2

        </div>

    </div>

</div>

</body>

</html>

普通banner或信息列表可以用IScroll上下左右均可滑动

页面滑动切换的话建议使用jquery mobile,实现如下事件,进行changepage

swipe(划动):一秒内水平拖拽大于30PX,同时纵向拖曳小?0px的事件发生时触发

swipeleft(左划):划动事件为向左的方向时触发

swiperight(右划):划动事件为向右的方向时触发