In my main.html file, there are several divs each with 2 classes. The first is their specific class and the second is a class called menu-item, which determines if an event will be triggered when clicked.
For example:
<div id="load-here">
</div>
<div class="item-1 menu-item">
click this
</div>
I also have a gallery.html file that I want to load into the #load-here div in main.html. Let's say the gallery.html file looks like this:
<div class="menu-item>
<!-- some image here -->
<img href="img/1.jpg />
</div>
The script I am using is as follows:
$(document).ready(function() {
$( "div" ).click(function() {
if ( $( this ).hasClass( "menu-item" ) ) {
$("#load-here").load("gallery.html" + this.class);
}
});
});
However, I am facing a problem where the gallery.html file is not loading into the #load-here div despite trying various changes. It seems like the script is not functioning correctly.