显示目录拓扑的页面

Posted 2021-04-17

有没有办法做到这一点：

  <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/

有没有办法在不单独列出每个文件的情况下执行此操作？

答案

你可以用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阵列，或通过其他调用从站点上的目录动态执行。