How to call a piece of HTML code together on multiple HTML pages
|
Method 1: Use script method: Create a common header file head.js or a common footer file foot.js. If the homepage file is mac.htm, the method to call the header or footer file is: add the following code at the beginning and end of the homepage file code respectively: <script src='head.js'> and <script src='foot.js'> to call the common web page header or footer, which reduces the complexity of writing the header or footer for each page and is convenient for modification. As long as one header or footer file is modified, the header or footer of all pages will change accordingly, increasing work efficiency. The HTML implementation code of the navigation bar is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="../css/head.css">
</head>
<body>
<div class='miaov_head'>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Music</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li>
</ul>
</div>
</body>
</html>Its css file is head.css:
* {
margin: 0;
padding: 0;
}
body {
background: white;
position: relative;
height: 100%;
color: #777;
font-size: 13px;
}
li {
list-style: none;
text-decoration: none;
}
.miaov_head {
height: 36px;
width: 100%;
margin: 0 auto;
background: black;
margin-bottom: 0px;
}
.miaov_head ul {
float: left;
width: 900px;
height: 36px;
margin-top: 0px;
color: white;
position: absolute;
top: 0px;
margin-left: 250px;
}
.miaov_head ul li {
float: left;
padding-left: 80px;
margin-left: 0px;
color: white;
list-style: none;
}
.miaov_head ul li a {
color: white;
font-size: 14px;
text-decoration: none;
}
.miaov_head input {
position: absolute;
top: 5px;
margin-left: 1000px;
width: 200px;
height: 22px;
}
.miaov_head a {
line-height: 36px;
color: #777;
}
.miaov_head a:hover {
color: #555;
}
Convert the above HTML code to JavaScript:
document.writeln("<!DOCTYPE html>");
document.writeln("<html>");
document.writeln("<head>");
document.writeln("<meta charset=\"utf-8\">");
document.writeln("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">");
document.writeln("<title>Examples</title>");
document.writeln("<meta name='description' content=\"\">");
document.writeln("<meta name='keywords' content=\"\">");
document.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/head.css\">");
document.writeln("</head>");
document.writeln("<body >");
document.writeln(" <div class=\'miaov_head\'>");
document.writeln(" <ul>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Mac</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPad</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">iPhone</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Watch</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Music</a></li>");
document.writeln(" <li><a href=\"http://www.cnblogs.com/jtjds/\">Contact Us</a></li>");
document.writeln(" </ul>");
document.writeln("</div>");
document.writeln(" ");
document.writeln("</body>");
document.writeln("</html>");
document.writeln("");And save it in head.js. After saving, when you need to use it, you can call the js file in the head, for example, call head.js in mac.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../javascript/head.js"></script>
</head>
<body>
<ul>
<li><a href="http://www.cnblogs.com/jtjds/">Mac</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPad</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">iPhone</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Watch</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Music</a></li>
<li><a href="http://www.cnblogs.com/jtjds/">Contact Us</a></li>
</ul>
</body>
</html>View in browser:
Method 2: Use $("selector").load() To avoid code duplication in multiple pages, you can use the load() method to put repeated parts (such as navigation bars) into separate files.
//1. Use this structure where you want to insert it in the current file:
<div class="include" file="***.html"></div>
//2. Put the content in ***.html, and use html format only because it will provide writing assistance for the editor. .
//3. Code:
$(".include").each(function() {
if (!!$(this).attr("file")) {
var $includeObj = $(this);
$(this).load($(this).attr("file"), function(html) {
$includeObj.after(html).remove(); //Write the loaded file content to the back of the current tag and remove the current tag})
}
});
Or just write the repeated parts in the index file, and put the rest into separate files and load() them in~ Compared to the first method, I personally recommend the second method more. Reference: jQuery - AJAX load() Method This is the end of this article about how to call a section of HTML code together on multiple HTML pages. For more relevant content about how to call a section of HTML code together on multiple HTML pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future! |
<<: How to enable MySQL remote connection
>>: Docker packages the local image and restores it to other machines
Recommend
How to achieve 3D dynamic text effect with three.js
Preface Hello everyone, this is the CSS wizard - ...
Solve the problem that ifconfig and addr cannot see the IP address in Linux
1. Install the Linux system on the virtual machin...
Using Docker run options to override settings in the Dockerfile
Usually, we first define the Dockerfile file, and...
Architecture and component description of docker private library Harbor
This article will explain the composition of the ...
How to implement https with nginx and openssl
If the server data is not encrypted and authentic...
Detailed explanation of simple snow effect example using JS
Table of contents Preface Main implementation cod...
How to clear floating example code in css
Overview The framework diagram of this article is...
MySQL 8.0 New Features - Introduction to Check Constraints
Table of contents Preface Check Constraints Creat...
TypeScript Enumeration Type
Table of contents 1. Overview 2. Digital Enumerat...
Detailed explanation of the basic commands of Firewalld firewall in Centos7
1. Basics of Linux Firewall The Linux firewall sy...
Example code for implementing a simple search engine with MySQL
Table of contents Preface Introduction ngram full...
Summary of the pitfalls you may not have encountered in WeChat applet development
Table of contents getApp() Define variables at th...
Detailed instructions for installing SuPHP on CentOS 7.2
By default, PHP on CentOS 7 runs as apache or nob...
How to implement Nginx reverse proxy and load balancing (based on Linux)
Let's try out nginx's reverse proxy here....
Example of how to set up a Linux system to automatically run a script at startup
Preface Hello everyone, I am Liang Xu. At work, w...