通过 tab li rel 更改图像 src答案

【问题标题】：Pass tab li rel to change image src通过 tab li rel 更改图像 src
【发布时间】：2014-08-21 02:21:19
【问题描述】：

这个通常应该很容易，但我被挂断了。我正在尝试根据所选页面上的选项卡更改图像 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 文件夹中。

【问题讨论】：

标签： jquery hyperlink tabs dynamic-linking

【解决方案1】：

使用.attr()获取rel值，

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

Demo

【讨论】：

比一起摩擦兔子的脚效果更好：]

【解决方案2】：

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

这个 sn-p 抓取被单击的列表项的 rel 属性（您已经将其用于选项卡），然后将其添加到图像源中。

【讨论】：