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
Research on the effect of page sidebar realized by JS
Table of contents Discover: Application of displa...
Writing a shell script in Ubuntu to start automatically at boot (recommended)
The purpose of writing scripts is to avoid having...
MySQL log system detailed information sharing
Anyone who has worked on a large system knows tha...
jQuery plugin to implement accordion secondary menu
This article uses a jQuery plug-in to create an a...
Summary of using the exclamation mark command (!) in Linux
Preface Recently, our company has configured mbp,...
MySQL InnoDB row_id boundary overflow verification method steps
background I talked to my classmates about a boun...
Vue implements small search function
This article example shares the specific code of ...
Detailed explanation of incompatible changes in rendering functions in Vue3
Table of contents Rendering API changes Render fu...
Pure CSS to achieve horizontal line animation under the element (background-image)
Effect picture: html: <div class='site_bar...
Mysql join query principle knowledge points
Mysql join query 1. Basic concepts Connect each r...
Implementation of Node connection to MySQL query transaction processing
Table of contents Enter the topic mysql add, dele...
Detailed graphic tutorial on installing centos7 virtual machine in Virtualbox
1. Download centos7 Download address: https://mir...
Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment
The so-called connection limit in Nginx is actual...
Elegant practical record of introducing iconfont icon library into vue
Table of contents Preface Generate SVG Introducti...
Web page text design should be like smart girls wearing clothes
<br />"There are no ugly women in the w...