文章/答案/技术大牛

发布

社区首页 >问答首页 >循环遍历本地文件夹&动态创建元素

问循环遍历本地文件夹&动态创建元素
EN

Stack Overflow用户

提问于 2018-02-17 14:25:35

回答 1查看 1.6K关注 0票数 3

我想做一个jquery选项卡菜单，每个选项卡上包含54个图片。我在文件夹中有880图像，每个图像使用<img>需要很长时间。我能循环每一个并动态地将它们附加到选项卡中吗？这就是我想要的一个标签的样子。

img {
    width: 35px;
    height: 35px;
}
#tabs {
    width: 420px;
    height: 300px;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	  float: left;
	  padding: .1em .175em;
	  text-decoration: none;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
      img {
          width: 35px;
          height: 35px;
      }
      #tabs {
          width: 420px;
          height: 300px;
      }
      .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	  float: left;
	  padding: .1em .175em;
	  text-decoration: none;
      }
  </style>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1</a></li>
    <li><a href="#tabs-2">2</a></li>
    <li><a href="#tabs-3">3</a></li>
    <li><a href="#tabs-4">4</a></li>
    <li><a href="#tabs-5">5</a></li>
    <li><a href="#tabs-6">6</a></li>
    <li><a href="#tabs-7">7</a></li>
    <li><a href="#tabs-8">8</a></li>
    <li><a href="#tabs-9">9</a></li>
    <li><a href="#tabs-10">10</a></li>
    <li><a href="#tabs-11">11</a></li>
    <li><a href="#tabs-12">12</a></li>
    <li><a href="#tabs-13">13</a></li>
    <li><a href="#tabs-14">14</a></li>
    <li><a href="#tabs-15">15</a></li>
    <li><a href="#tabs-16">16</a></li>
    <li><a href="#tabs-17">17</a></li>
  </ul>
  <div id="tabs-1">
    <img src="emojis-master/100.png"/>
    <img src="emojis-master/1234.png"/>
    <img src="emojis-master/8ball.png"/>
    <img src="emojis-master/a.png"/>
    <img src="emojis-master/ab.png"/>
    <img src="emojis-master/abc.png"/>
    <img src="emojis-master/abcd.png"/>
    <img src="emojis-master/accept.png"/>
    <img src="emojis-master/aerial_tramway.png"/>
    <img src="emojis-master/airplane.png"/>
    <img src="emojis-master/alarm_clock.png"/>
    <img src="emojis-master/alien.png"/>
    <img src="emojis-master/ambulance.png"/>
    <img src="emojis-master/anchor.png"/>
    <img src="emojis-master/angel.png"/>
    <img src="emojis-master/anger.png"/>
    <img src="emojis-master/angry.png"/>
    <img src="emojis-master/anguished.png"/>
    <img src="emojis-master/ant.png"/>
    <img src="emojis-master/apple.png"/>
    <img src="emojis-master/aquarius.png"/>
    <img src="emojis-master/aries.png"/>
    <img src="emojis-master/arrow_backward.png"/>
    <img src="emojis-master/arrow_double_down.png"/>
    <img src="emojis-master/arrow_double_up.png"/>
    <img src="emojis-master/arrow_down.png"/>
    <img src="emojis-master/arrow_down_small.png"/>
    <img src="emojis-master/arrow_forward.png"/>
    <img src="emojis-master/arrow_heading_down.png"/>
    <img src="emojis-master/arrow_heading_up.png"/>
    <img src="emojis-master/arrow_left.png"/>
    <img src="emojis-master/arrow_lower_left.png"/>
    <img src="emojis-master/arrow_lower_right.png"/>
    <img src="emojis-master/arrow_right.png"/>
    <img src="emojis-master/arrow_right_hook.png"/>
    <img src="emojis-master/arrow_up.png"/>
    <img src="emojis-master/arrow_up_down.png"/>
    <img src="emojis-master/arrow_up_small.png"/>
    <img src="emojis-master/arrow_upper_left.png"/>
    <img src="emojis-master/arrow_upper_right.png"/>
    <img src="emojis-master/arrows_clockwise.png"/>
    <img src="emojis-master/arrows_counterclockwise.png"/>
    <img src="emojis-master/art.png"/>
    <img src="emojis-master/articulated_lorry.png"/>
    <img src="emojis-master/atm.png"/>
    <img src="emojis-master/b.png"/>
    <img src="emojis-master/baby.png"/>
    <img src="emojis-master/baby_bottle.png"/>
    <img src="emojis-master/baby_chick.png"/>
    <img src="emojis-master/back.png"/>
    <img src="emojis-master/bad.png"/>
    <img src="emojis-master/baggage_claim.png"/>
    <img src="emojis-master/balloon.png"/>
    <img src="emojis-master/ballot_box_with_check.png"/>
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
  <div id="tabs-4">
  </div>
  <div id="tabs-5">
  </div>
  <div id="tabs-6">
  </div>
  <div id="tabs-7">
  </div>
  <div id="tabs-8">
  </div>
  <div id="tabs-9">
  </div>
  <div id="tabs-10">
  </div>
  <div id="tabs-11">
  </div>
  <div id="tabs-12">
  </div>
  <div id="tabs-13">
  </div>
  <div id="tabs-14">
  </div>
  <div id="tabs-15">
  </div>
  <div id="tabs-16">
  </div>
  <div id="tabs-17">
  </div>
</div>
 
 
</body>
</html>

提前谢谢。我需要写这个，否则我不能发布这个问题，因为我有很多代码在里面。别管这部分了。

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-17 15:26:32

如果您的文件位于服务器上，并且希望动态填充HTML文件，或者如果您的文件位于常规(而不是服务器)设备上，则需要运行一些文件操作，则需要服务器端解决方案。不幸的是，这两个选项都不能从浏览器环境中获得。

服务器端可以使用PHP 斯堪迪尔()方法或Node.js fs.readdir()方法将文件列表作为文本转储到页面，例如插入JavaScript变量列表或URL数组。或者您可以使用其中之一将文件或文件结构的JSON表示和阿贾克斯编译到应用程序中。

在非服务器环境中，我建议创建一个文件列表，以便在应用程序中使用，或者使用命令行函数，或者如果突出显示所有文件，Ctrl+C会复制它们，并将它们粘贴到文本文档中，您将得到一个列表文件地址，它可以很容易地转换为JavaScript数组或JSON文件。就我个人而言，我会考虑沿着JSON路线走下去。

你也会发现这些链接很有用..。

;)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48842327

复制

相似问题

问循环遍历本地文件夹&动态创建元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问循环遍历本地文件夹&动态创建元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问循环遍历本地文件夹&动态创建元素
EN