Блог

В целом это должно быть легко, но я зацикливаюсь. Я пытаюсь изменить src изображения на основе вкладки на выбранной странице. Я думал скрыть шоу, но предпочел бы написать что-то более точное. Код:

 <img id="change_img" src="img/Change_Me.jpg" alt="" />

<ul class="tabs">
    <li rel="tab1">Tab1</li>
    <li rel="tab2">Tab 2</li>
    <li rel="tab3">Tab 3</li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <h2>Tab 1</h2>
        <p>Content</p>
    </div>
   <div id="tab2" class="tab_content">
        <h2>Tab 2</h2>
        <p>Content</p>
    </div>
  ...... etc.....
  

Итак, когда кто-то нажимает на li tab1, rel переходит в src на изображении выше. Итак
<img id="change_img" src="img/tab1.jpg" alt="" />
<img id="change_img" src="img/tab2.jpg" alt="" />
<img id="change_img" src="img/tab3.jpg" alt="" />
и т.д…. Изображение всегда будет в формате .jpg и находиться в папке img.

Используйте . attr() чтобы получить rel значение,

 $('.tabs li').click(function(){
    $('#change_img').attr('src','img/' $(this).attr("rel") '.jpg');
});
  

ДЕМОНСТРАЦИЯ

 $(document).ready(function() {
  $('ul.tabs > li').click(function() {
    var thisTab = $(this).attr('rel');
    $('img#change_img').attr('src', 'img/' thisTab '.jpg');
  });
});
  

Этот фрагмент захватывает атрибут rel элемента списка, на который был нажат (который вы уже используете для вкладок), а затем добавляет его в источник изображения.