Question

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

Answer 1

使用。 attr() 获取rel值，

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

<强> Demo

Answer 2

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

此代码段抓取已单击的列表项的rel属性（已用于选项卡），然后将其添加到图像源。

通过标签li rel来更改图像src

2 个答案: