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
Vue realizes cascading selection of provinces, cities and districts
Recently, I need to implement a cascading selecti...
Installation of Ubuntu 18.04 reports: failed to load ldlinux.c32 and its solution steps
Preface I have an old laptop with Win7. In order ...
getdata table table data join mysql method
public function json_product_list($where, $order)...
How to load third-party component libraries on demand in Vue3
Preface Take Element Plus as an example to config...
JavaScript timer to achieve limited time flash sale function
This article shares the specific code of JavaScri...
A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)
I am a beginner in SQL and thought that the insta...
Learn about CSS label display mode in one article
Tag type (display mode) HTML tags are generally d...
CSS implements the function of hiding the search box (animation forward and reverse sequence)
Placing a search box in the top menu bar is a com...
Native js to achieve star twinkling effect
This article example shares the specific code of ...
Summarize the User-Agent of popular browsers
1. Basic knowledge: Http Header User-Agent User A...
Div adaptive height automatically fills the remaining height
Scenario 1: Html: <div class="outer"...
Example code for Html layered box-shadow effect
First, let’s take a look at the picture: Today we...
Data constraint examples based on MySQL database and introduction to five integrity constraints
In order to prevent non-compliant data from enter...
Linux process management tool supervisor installation and configuration tutorial
Environment: CentOS 7 Official documentation: htt...
Detailed example of reading speed of js objects
1. Accessing literals and local variables is the ...