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
Example of using rem to replace px in vue project
Table of contents tool Install the plugin Add a ....
Solution to many line breaks and carriage returns in MySQL data
Table of contents Find the problem 1. How to remo...
Analysis and solution of abnormal problem of loading jar in tomcat
Description of the phenomenon: The project uses s...
JavaScript to implement a simple web calculator
background Since I was assigned to a new project ...
MySql 8.0.11 installation and configuration tutorial
Official website address: https://dev.mysql.com/d...
CSS uses the autoflow attribute to achieve seat selection effect
1. Autoflow attribute, if the length and width of...
css add scroll to div and hide the scroll bar
CSS adds scrolling to div and hides the scroll ba...
Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM
Table of contents Difference between MVC and MVVM...
Detailed explanation of Vue3.0 + TypeScript + Vite first experience
Table of contents Project Creation Project Struct...
Detailed explanation of the limitations and restrictions of MySQL partitioned tables
Disable Build Partition expressions do not suppor...
MySQL data type selection principles
Table of contents Small but beautiful Keep it sim...
The implementation process of Linux process network traffic statistics
Preface Linux has corresponding open source tools...
Detailed explanation of the order of Mysql query results according to the order of ID in in()
Detailed explanation of the order of Mysql query ...
How to install vncserver in Ubuntu 20.04
Ubuntu 20.04 has been officially released in Apri...
Mysql solves the database N+1 query problem
Introduction In orm frameworks, such as hibernate...