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

html-css014

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>

导航栏下面放一个Div,专门用来显示对应导航栏目的内容。点击导航栏触发点击事件,在事件函数中获取点击的栏目id,通过此id确定往div中添加那个内容。可以用div.innerHTML来更新div显示的内容。

或者,导航栏下面放置多个Div,数量等于导航栏目的个数,所有div要都重叠在一起。在点击事件函数中控制div的显示和隐藏。

可以使用网页的锚点,即<a>标签的id属性,如<a id="C6">Chapter 6</a>当从另处页面连接到该页地址加#C6时就会跳转到此处。

示例:

网页a.htm

<!DOCTYPE html>

<head>

<title>A</title>

</head>

<body>

<a href="b.htm#C6">B - Chapter 6</a>

</body>

</html>

网页b.htm

<!DOCTYPE html>

<head>

<title>B</title>

</head>

<body>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2><a id="C6">Chapter 6</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>