前言

被朋友拉去参加计算机设计大赛，准备编写web项目，我被安排去找页面之间切换的动效。既没有vue.js基础又没有jquery.js基础甚至又没有javascript基础的我只能从基本概念学起，经过了一天终于可以实现上述功能了。

准备

创建index.html

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/jump.js" type="text/javascript"></script>

导入jquery.js与自己的js文件。

添加导航按钮

<div id="frame">
<ul class="nav nav-tabs" id="menu">
<li class="nav-item"> <a class="nav-link active" href="javascript:void(0);" id="index_btn">Index</a> </li>
<li class="nav-item"> <a class="nav-link" href="javascript:void(0);" id="content_btn">Content</a> </li>
</ul>
<div id="content">
<h1>Index</h1>
</div>
</div>

将导航按钮和主要内容添加在frame下。

创建content.html

在index.html的基础上稍作修改，将导航按钮改为Content是被选中的。

<li class="nav-item"> <a class="nav-link active" href="javascript:void(0);" id="content_btn">Content</a> </li>

实现

编写jump.js

var page = ["Index","Content"]; //定义页面标题
$(document).ready(function(){ //保证页面加载完成后再来执行脚本
       var content = $("#content"); //定义选择器
       var menu = $("#menu");
       content.css("display","none");
        //将该选择器的css中display属性设置为none
       content.slideToggle(1000);
        //对该选择器进行滑动动画
        /*
        *  以下代码则对元素进行事件监听
        *  监听点击事件
        */
       $(document).on("click","li #content_btn",function(){
              content.slideToggle("fast");
              content.load("content.html #content"); //进行加载主要内容操作
              menu.load("content.html #menu"); //进行加载菜单操作
              window.document.title = page[1]; //修改页面标题
              window.href = page[1];
              content.slideToggle("fast");
       });
       $(document).on("click","li #index_btn",function(){
              content.slideToggle("fast");
              content.load("index.html #content");
              menu.load("index.html #menu");
              window.document.title = page[0];
              window.href = page[0];
              content.slideToggle("fast");
       });
});

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
$().bind()直接绑定在元素上，和click，blur，mouseon一样的点击事件。

$().live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。

$().delegate()是更精确的小范围的使用事件代理。

$().on()结合了这三个方法的优势摒弃了劣势。

 $(document).on(method,selecter,function);

 $(selecter).click(function);

成品演示