Question

我想制作一个jquery-ui标签菜单，每个标签上包含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>

提前致谢。我需要写这个，否则我不能发布这个问题，因为我有很多代码。请忽略这一部分。

Answer 1

如果您的文件位于服务器上并且想要动态填充HTML文件，或者如果您的文件位于常规（非服务器）设备上，则需要运行某些文件，则需要服务器端解决方案操作。遗憾的是，浏览器环境中都没有这两种选项。

服务器端您可以使用PHP scandir()方法或Node.js fs.readdir()方法将文件列表转储到您的页面作为文本，例如，插入JavaScript变量列表或一系列的URL。或者您可以使用其中一个来编译文件或文件结构的JSON表示，并将AJAX编译到您的应用程序中。

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

您可能还会发现这些链接很有用......

）

循环浏览本地文件夹＆amp;动态创建元素

1 个答案: