js中加载指定的html代码,js实现网页之间的跳转和在指定div加载页面

[TOC]

### jQuery实现方式：

~~~

$(function(){

//将网页装载到名为pages的常量数组中

const pages =["home.html","aboutus.html","productshow.html","joinus.html","contactus.html"];

//主页名装载的默认页面

$("#mx_content").load(pages[0]);

//导航栏点击变色兄弟元素隐藏

$("#mx_navigation li").click(function(){

$(this).addClass("select").siblings().removeClass("select");

//div默认装载页面

$("#mx_content").load(pages[$(this).index()]);

});

//底部加载页面

$("#changepage div").click(function(){

$("#mx_navigation li").eq($(this).index()+1).addClass("select").siblings().removeClass("select");

$("#mx_content").load(pages[$(this).index()+1]);

});

})

html 中要添加

~~~

### js实现方法：

在指定div中加载页面

~~~

使用JavaScript代码替换div内容

function load_home() {

document.getElementById("main").innerHTML = '';}

其中”main”为div的id，data中的内容是HTML网页的绝对路径

div代码

进行切换

切换

~~~