I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle through the images and append them to the tabs? The desired appearance for one tab is as follows.
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-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/ballot_box_with_check.png"/>
</div>
<div id="tabs-2">
...
</div>
...
... <!-- more divs for additional tabs -->
</div>
</body>
</html>Your assistance with this task is greatly appreciated. Please disregard the following section as it is solely included due to coding requirements for posting the question.