Не могу сообразить как поменять скрипт?

Question

[Игорь Мезенцев]

Собственно такое дело. Есть скрипт который работает по принципу табов (мне его написали), при выборе одного из исполнителей в этом меню, меняется контент в правом блоке (самый большой). Структура всего этого дела примерно такая:

//это непосредственно часть меню
<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>

И самое главное, это jquery скрипт:

$(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');
});

И сам вопрос. В блоке muse и на скриншоте страницы видны обложки альбомов, которые являются ссылками, и необходимо чтобы при нажатии на одну из обложек(ссылок) открывался новый div в этом же блоке с контентом. То есть принцип тот же что и был, но теперь ссылкой является не пункт меню, а картинка. На картинке так же у меня висит hover-эффект, который я делал с помощью библиотеки imagehover.io.
Я не могу придумать как бы осуществить мне такой скрипт, логично предположить что делается всё абсолютно аналогично, но моё нубское знание js/jquery говорит за себя, прошу помочь знатоков.

Answer 1

[Николай]

Не совсем понял что Вам надо, но смею предположить: замените '.second-menu a' на объект, по которому должен быть клик, и добавьте атрибут на который мы должны переходить.
Например, если вы просто вместо ссылки вставили картинку, то должно быть что-то вроде:

...
<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');
    */
});

Comments

[Игорь Мезенцев]

Вы почти правильно поняли. Но картинки с ссылками у меня еще нагромождены сверху hover-эффектом, который я делал через библиотеку imagehover.io, структура выглядит примерно вот так:

<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>

И как видно до ссылки здесь еще нужно добраться

[Николай]

Игорь Мезенцев: Дак нет разницы, если вы сменили структуру, и хотите кликать по картинке, например,

<img src="img/musesongs.jpg" class="img-responsive">

, то просто добавьте картинкам какой-нибудь особый класс, например .img-nav, и те же дата атрибуты что я указал выше. А в скрипте, исправьте только '.second-menu a' на '.img-nav'

[Игорь Мезенцев]

Николай: то есть по сути ссылка тут вообще не нужна будет?

[Николай]

Игорь Мезенцев: Ну если я правильно понимаю, то да) Вы же хотите кликать по картинке - а для этого не нужна ссылка)

[Игорь Мезенцев]

Николай: ну я подумал чтобы открыть новый блок в блоке с контентом нужно чтобы была ссылка как в меню)

[Николай]

Игорь Мезенцев: ну просто у вас обработчик стоит на ссылку. Поменяйте обработчик на картинку, и вуаля! Никакой магии )

[Игорь Мезенцев]

Николай: Черт. Что-то не выходит. Я тот еще нуб.

<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" class="imghvrnav" data-href="#musealb" >
                        <figcaption>
                            <p class="namealb">Showbiz</p>
                            <p class="date1">Дата выхода: 09.09.1999</p>
                            <p class="label1">Лейбл: Warner Bros.</p>
                        </figcaption>
                        </figure>
                        <p class="textunder">Showbiz</p>
                        </div>
</div>
</div>

В этом блоке сделал как просили, поставил класс на картинку .imghvrnav, и data-href=""#musealb"
Ниже в блок с классом .content поместил блок с новым контентом с идентификатором musealb.
Далее исправил скрипт на следующий:

$('.imghvrnav').on('click', function(event) {
    event.preventDefault();
    var frmId = $(this).data('href');
    menuNavigator.navigate(frmId);
});

И собственно ссылку я убрал из этого блока за ненадобностью. Открыл проект, тык по картинке и ничего. И собственно без ссылки это теперь просто картинка, грубо говоря.

[Николай]

Игорь Мезенцев: а клик точно по указанной картинке происходит? Проверьте так:

$('.imghvrnav').on('click', function(event) {

    alert();

    event.preventDefault();
    var frmId = $(this).data('href');
    menuNavigator.navigate(frmId);
});

Окошко выскакивает? )

[Игорь Мезенцев]

Николай: Неа, ничего. Думаю, может это из-за hover-эффекта

[Игорь Мезенцев]

Николай: Я сделал. По аналогии с менюшкой всё получилось. Спасибо за помощь.

[Николай]

Игорь Мезенцев: значит, что-то стояло выше картинки :)
Наздоровье )