显示目录拓扑的页面

Question

有没有办法做到这一点：

  <h1>Topology</h1>
<ul><li><a href="/"> Parent Directory</a></li>
<li><a href="File1.mp4"> File1.mp4</a></li>
<li><a href="File2.mp4"> File2.mp4</a></li>
<li><a href="File3.mp4"> File3.mp4</a></li>
<li><a href="File4.mp4"> File4.mp4</a></li>
<li><a href="File5.mp4"> File5.mp4</a></li>
<li><a href="File6.mp4"> File6.mp4</a></li>
<li><a href="File7.mp4"> File7.mp4</a></li>
<li><a href="File8.mp4"> File8.mp4</a></li>
<li><a href="File9.mp4"> File9.mp4</a></li>
<li><a href="File10.mp4"> File10.mp4</a></li>

</ul>

JSFiddle：https://jsfiddle.net/wagyox71/

有没有办法做到这一点而不单独列出每个文件？

Answer 1

您可以使用 JavaScript 来做到这一点。

为列表创建一个 div，然后使用脚本和数组填充 div。

div：<div id="myLinks"></div>

    var links = ['<a href="/"> Parent Directory</a>', '<a href =""> File1.mp4</a>', 'File2.mp4', 'etc'];
    var ul = document.createElement('ul');
    document.getElementById('myLinks').appendChild(ul);

    links.forEach(function(name){
        var li = document.createElement('li');
        ul.appendChild(li);
        li.innerHTML += name;
    });

您可以手动填充 links 数组，或通过其他调用从网站上的目录动态填充。

显示目录拓扑的页面

Page that displays topology of the directory

html

directory

file

topology