Can't figure out how to change the script?

Question

css

Actually such a thing. There is a script that works on the principle of tabs (it was written to me), when you select one of the performers in this menu, the content in the right block (the largest) changes. The structure of this whole case is something like this:

//это непосредственно часть меню
<p class="letters">A</p>
<hr style="border:1px solid #212121; margin:0;">
<nav class="menu2">
    <ul class="second-menu">
               <li><a href="#marman" data-nav>Marilyn Manson</a></li>
               <li><a href="#metal" data-nav>Metallica</a></li>
               <li><a href="#muse" data-nav class="active">Muse</a></li>
    </ul>
</nav>

//собственно сам один из блоков, при нажатии по ссылке из меню с ссылкой "#muse" открывается одноименный div
в блоке с контентом
<div class="col-xs-7">
                <section class="href-target">
                </section>
                <div class="content">
                    <div id="muse">
                        <h1 style="position:absolute; padding:0;color:white;margin:7px 0 0 275px;">Muse</h1>
                        <img src="img/musesongs.jpg" class="img-responsive">
                        <h2 class="albums123">Альбомы</h2>
                        <div class="first column">
                            <figure class="imghvr-fade">
                                <img src="img/showbiz.jpg">
                                <figcaption>
                                    <p class="namealb">Showbiz</p>
                                    <p class="date1">Дата выхода: 09.09.1999</p>
                                    <p class="label1">Лейбл: Warner Bros.</p>
                                </figcaption>
                                <a href="#"></a>
                            </figure>
                            <p class="textunder">Showbiz</p>
                        </div>

And most importantly, this jquery script:

$(document).ready(function(){
  var menuNavigator = {
    frame: document.querySelector('.href-target'),
    navigate: function(frameId) {
      var frm = document.querySelector(frameId);
      if(frm == null) throw new Exception('Frame '+frameId+' doen\'t exists!');
      this.setFrameContent(frm.innerHTML);
    },
    setFrameContent: function(txt) {
      this.frame.innerHTML = txt;
    }
};
  
  $('.second-menu a').on('click', function(event) {
    event.preventDefault();
    
    var frmId = new URL(this.href).hash;
    menuNavigator.navigate(frmId);
    $('.second-menu a.active').removeClass('active');
    $(this).addClass('active');
  });
    menuNavigator.navigate('#muse');
});

And the question itself. In the muse block and in the screenshot of the page, album covers are visible, which are links, and it is necessary that when you click on one of the covers (links), a new div opens in the same content block. That is, the principle is the same as it was, but now the link is not a menu item, but a picture. I also have a hover effect in the picture, which I did using the imagehover.io library.
I can’t figure out how to implement such a script for me, it’s logical to assume that everything is done in exactly the same way, but my noob knowledge of js / jquery speaks for itself, please help the experts.

Answer 1

I didn’t quite understand what you need, but I dare to suggest: replace '.second-menu a' with the object that should be clicked, and add the attribute that we should go to.
For example, if you just inserted an image instead of a link, then it should be something like:

...
<ul class="second-menu">
    <li><img src="img/img1.jpg" data-nav  data-href="#marman"></li>
    <li><img src="img/img2.jpg" data-nav  data-href="#metal"></li>
    <li><img src="img/img3.jpg" data-nav  data-href="#muse"></li>
</ul>
...

$('.second-menu img').on('click', function(event) {
    event.preventDefault();
    
    /* Это оставим для ссылок 
    var frmId = new URL(this.href).hash;
    */
    // Получим, куда нам идти
    var frmId = $(this).data('href');

    menuNavigator.navigate(frmId);
    /* И это тоже для ссылок
    $('.second-menu a.active').removeClass('active');
    $(this).addClass('active');
    */
});