1.分别写出两个html页面01.html和02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/css/mui.min.css">
<link rel="stylesheet" href="/css/iconfont.css">
<link rel="stylesheet" href="/css/Subject-555.css" id="style">
<!-- <link rel="import" href="common01.html" id="page1"> -->
<script src="/js/mui.js?v=1" type="text/javascript"></script>
<script src="/js/globalConfig.js"></script>
<script src="common.js"></script>
</head>
<body>
这个nav的盒子,就是你要引入的html页面要放置的位置,你所引入的页面的html的标签都要在这个盒子里面放着
<div id="nav"></div>
</body>
</html>
<script>
因为我的css使用mui框架写的,所以在要引入的页面进行页面的初始化
mui.ready(function () {
这个地方是你引入另外一个页面的方法 路径也写清楚
mui("#nav").load("common01.html")
})
</script>
2.你要使用的界面
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<nav class="mui-bar mui-bar-tab" style="background: #fff;">
<a id="defaultTab" class="mui-tab-item" href="#" data-index='0'>
<span class="mui-icon mypage">
<img src="/images/transparentimage/v2_main-cg.png" class="" style=" height: 25px;"/>
</span>
<span class="mui-tab-label margin-top-5 btm">首页</span>
</a>
<a class="mui-tab-item" href="#" data-index='1'>
<span class="mui-icon">
<img src="/images/new/v2_class_cg.png" style=" height: 25px;" />
</span>
<span class="mui-tab-label margin-top-5">订单</span>
</a>
<a class="mui-tab-item" href="#" data-index='2'>
<span class="mui-icon">
<img src="/images/new/v2_main-gwc.png" style=" height: 25px;" />
<span class="mui-badge mui-badge-danger" id="CarCount" style="display:none; left: 100%;"></span>
</span>
<span class="mui-tab-label margin-top-5">购物车</span>
</a>
<a class="mui-tab-item" href="#" data-index='3'>
<span class="mui-icon">
<img src="/images/new/v2_main-wd.png" style=" height: 25px;" />
</span>
<span class="mui-tab-label margin-top-5">我的</span>
</a>
</nav>
</body>
3.在2的页面中,可能你会用到一些css的样式,这些样式都要在你01.html中进行引入
4.你在02.html中所用到的一些逻辑问题的js,也要自己封装一个js的文件夹,在01.html进行引入的使用
总结下来:
01.html 是你要引入别的页面的大页面
02.html 是你需要使用的页面,也就是要进行引入的页面小页面
还有02.js。02.css 是02.html中所使用的一些外面的文件,也要在01.html中进行引入。
5.就是你在引入到其他页面的时候,使用02.html中的一些类名时,一定要在02.js中的开始加上window.οnlοad=function(){}
在进行获取页面的类名信息,因为如果不使用这样的方法,实际上在你进行获取时,页面的元素还没有加载完成,可能会出现报错的情况。
调用load方法的完整格式是:load( url, [data], [callback] )参数分别url地址、文件类型(php、html等)、回调函数,也支持选择器加载load("test.html #内容id名")
加油吧,骚年们,我们都要心怀梦想,希望有一天能够成为大佬!!!