我将 jQuery 库添加到 header.php 文件，但 index.php 文件无法访问该库。但是，当直接从 index.php 文件引用库时，index.php 文件能够访问 jQuery 库。
这是文件的结构。
---header.php---
--index.php-----
下面是header.php的代码
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-1.11.3.min.js"></script>
<script type='text/javascript' src='scroll.js'></script>
</head
<body>
<header>
<a href="/datacentre/index.php" title="Return to the homepage" id="logo">
<img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo"
style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
help
</a>
</header>
index.php 代码
<?php
include('/header.php');
?>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
<tr>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
<td>Row 7</td>
</tr>
<tr>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
<td>Row 8</td>
</tr>
<tr>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
<td>Row 9</td>
</tr>
<tr>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
<td>Row 10</td>
</tr>
</tbody>
</table>
</body>
</html>Javascript scroll.js 代码
$('table').on('scroll', function () {
$("table > *").width($("table").width()) + $("table").scrollLeft());
});CSS代码style.css
html {
font-family: verdana;
font-size: 10pt;
line-height: 25px;
}
header ,footer ,
aside, nav , article{
display:block;
}
.headerspan{
height:40px;
width:860px;
margin: 0px auto;
text-align: center;
position:absolute;
top:-10;
font-size:200%;
}
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
margin-top:50px;
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
}
#search {
padding: 5px 9px;
height: 12px;
width: 380px;
border: 1px solid #a4c3ca;
font: normal 13px 'trebuchet MS', arial, helvetica;
background: #f1f1f1;
border-radius: 50px 3px 3px 50px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}最佳答案
BodyJuan Bonnet 知道了。在主体底部添加 JQUERY && scroll.js，在它加载后，否则 Jquery 找不到引用，因为它在 HTML 之前加载。
头部首先加载，因此主体在调用时不存在。
加载完Body后再加载Jquery，效果会更好。如果您真的不想或不能... charliefti 有一个解决方案。 $(document).ready() { 你的 Jquery 代码 } 如果你的 Body 在调用 $('#myElement') 时不存在，那么 Jquery 找不到它，即使你可以在源代码中看到它。操作顺序。
如果可以的话，最好在 Body 底部加载 Jquery 和任何脚本。这意味着 HTML 将在 .js 之前加载，从而提供更好的用户体验。
关于javascript - 将 jQuery 添加到 Header.php 文件失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32814035/