我正在尝试创建一个HTML页面，该页面将根据当前目录中的内容进行更改。有一个图像框和更改图像的按钮。但是因为这个页面在不同的页面中是相同的，有没有办法根据同一目录中有多少图像来添加或删除这些按钮？
这个想法是，该网站将以最小的努力进行扩展，以便更改每个页面，以便其他用户可以这样做。在下面的文件中，需要删除的是changePage按钮。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head id="head">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>
Maths Study and Revision
</title>
<link href="./styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function changePage(page) {
var img = document.getElementById("image");
img.src="./pages/page_" + page + ".png";
return false;
}
</script>
</head>
<body background="/img/image.jpg">
<div id="container">
<div id="header">
<h1 style="border-style:solid;border-color:White;border-width:1px;">
Maths Study and Revision
</h1>
</div>
<div id="menuwrapper">
<ul>
<li>
<a href="#">Higher Tier</a>
<ul>
<li>
<a href="#">Calculator Paper</a>
<ul>
<li>
<a href="/j13/hc/index.html">June 2013</a>
</li>
<li>
<a href="/m13/hc/index.html">March 2013</a>
</li>
<li>
<a href="/n12/hc/index.html">November 2012</a>
</li>
<li>
<a href="/j12/hc/index.html">June 2012</a>
</li>
</ul>
</li>
<li>
<a href="#">Non-Calculator Paper</a>
<ul>
<li>
<a href="/j13/hn/index.html">June 2013</a>
</li>
<li>
<a href="/m13/hn/index.html">March 2013</a>
</li>
<li>
<a href="/n12/hn/index.html">November 2012</a>
</li>
<li>
<a href="/j12/hn/index.html">June 2012</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Foundation Tier</a>
<ul>
<li>
<a href="#">Calculator Paper</a>
<ul>
<li>
<a href="/j13/fc/index.html">June 2013</a>
</li>
<li>
<a href="/m13/fc/index.html">March 2013</a>
</li>
<li>
<a href="/n12/fc/index.html">November 2012</a>
</li>
<li>
<a href="/j12/fc/index.html">June 2012</a>
</li>
</ul>
</li>
<li>
<a href="#">Non-Calculator Paper</a>
<ul>
<li>
<a href="/j13/fn/index.html">June 2013</a>
</li>
<li>
<a href="/m13/fn/index.html">March 2013</a>
</li>
<li>
<a href="/n12/fn/index.html">November 2012</a>
</li>
<li>
<a href="/j12/fn/index.html">June 2012</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="intro">
<p style="float:left;margin-left:10px;margin-bottom:10px;">
<object type='text/plain' data='./title.html' height="50px" width="800px"></object>
</p>
</div>
<div id="exam">
<img src="./pages/page_1.png" id="image">
</div>
<div class="col1">
<button onclick="changePage('1')">Page 1</button>
<button onclick="changePage('2')">Page 2</button>
<button onclick="changePage('3')">Page 3</button>
<button onclick="changePage('4')">Page 4</button>
<button onclick="changePage('5')">Page 5</button>
<button onclick="changePage('6')">Page 6</button>
<button onclick="changePage('7')">Page 7</button>
<button onclick="changePage('8')">Page 8</button>
<button onclick="changePage('9')">Page 9</button>
<button onclick="changePage('10')">Page 10</button>
<button onclick="changePage('11')">Page 11</button>
<button onclick="changePage('12')">Page 12</button>
<button onclick="changePage('13')">Page 13</button>
<button onclick="changePage('14')">Page 14</button>
<button onclick="changePage('15')">Page 15</button>
<button onclick="changePage('16')">Page 16</button>
<button onclick="changePage('17')">Page 17</button>
<button onclick="changePage('18')">Page 18</button>
<button onclick="changePage('19')">Page 19</button>
<button onclick="changePage('20')">Page 20</button>
<button onclick="changePage('21')">Page 21</button>
<button onclick="changePage('22')">Page 22</button>
<button onclick="changePage('23')">Page 23</button>
<button onclick="changePage('24')">Page 24</button>
</div>
<div id="footer">
</div>
</div>
</body>
任何帮助将不胜感激！
答案 0 :(得分：0)
单靠JavaScript无法做到这一点。您需要使用服务器端脚本才能读取目录的内容。如果您正在使用PHP，则可以使用readdir函数，然后相应地更改HTML。
答案 1 :(得分：0)
使用PHP和scandir()方法可以轻松实现此目的。但是，这需要服务器运行您的网页（WAMP可用于模拟本地服务器）。
然而，使用HTML5可以替代它。如前所述here，您可以在以下网站上找到描述该过程的教程：
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-dir-reading