点击时 Jquery 删除/添加图像答案

【问题标题】：Jquery Remove/Add Image on Click点击时 Jquery 删除/添加图像
【发布时间】：2014-05-24 10:07:17
【问题描述】：

目前我有一个 div，里面有“第一张图片”。这是每个选项卡的默认设置。但是，当我单击 href 2 时，我不仅希望选项卡更改，而且还希望图像更改为第二个图像。

这是我正在使用的代码的一部分：

 <img src="images/1st-image.jpg">
<!-- <img src="images/2nd-image.jpg"> -->

        <div id="tabmenu">
          <ul id="Tabnav">
             <li><a href="#/" class="active">1</a></li>
             <li><a href="#/">2</a></li>
             <li><a href="#/">3</a></li>
           </ul>
         </div>

这是当前用于导航选项卡的 JQuery：

    $('#tab-content div').hide();
    $('#tab-content div:first').show();

      $('#Tabnav li').click(function() {
      $('#Tabnav li a').removeClass("active");
      $(this).find('a').addClass("active");
      $('#tab-content div').hide();

    var indexer = $(this).index(); 
    $('#tab-content div:eq(' + indexer + ')').fadeIn();
});

【问题讨论】：

你能提供一个jsFiddle吗？

标签： jquery image class add

【解决方案1】：

将属性 data-other-src 添加到每个 href 以及要显示的图像的路径。所以例如第二个链接变成了

<li><a href="/#" data-other-src="images/2nd-image">2</a></li>

将此添加到 .click 函数中：

 $('#tab-content div').find('img').attr('src', $(this).attr('data-other-src'))

我让 jsFiddle 按照我的想法工作。将html更改为：

<!DOCTYPE html>
<body>
<div class="TabWrap">   
    <div class="brewImg">
     <img id="image1" src="http://news.bbcimg.co.uk/media/images/75088000/jpg/_75088402_022410338-1.jpg">
     <div id="tabmenu">
       <ul id="Tabnav">
        <li><a href="#/" data-other-src="http://news.bbcimg.co.uk/media/images/75088000/jpg/_75088402_022410338-1.jpg" class="active">1</a></li>
        <li><a href="#/" data-other-src="http://news.bbcimg.co.uk/media/images/75089000/jpg/_75089349_s9tjnwq7.jpg">2</a></li>
        <li><a href="#/" data-other-src="http://news.bbcimg.co.uk/media/images/75087000/jpg/_75087897_022408402.jpg">3</a></li>
        </ul>
      </div> 

    <div id="tab-content">

        <div id="tab1">

            1

        </div>

        <div id="tab2">

       2

        <div id="tab3">

        3    

        </div>

        </div>
        </div>

和 javascript 到：

$(document).ready(function () {
$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#Tabnav li').click(function() {    
    $('#Tabnav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();
    $('#image1').attr('src', $(this).find('a').attr('data-other-src'))

    var indexer = $(this).index(); 
    $('#tab-content div:eq(' + indexer + ')').fadeIn();
});
});

在 jsFiddle 的左侧面板上，在 framework and extensions 下选择 jQuery 2.1.0。当您单击每个链接时，我命名为 image1 的顶部图片会发生变化。

【讨论】：

嗯，这似乎没有任何作用？
放到jsFiddle上。如果引用正确，它会起作用，但我无法检查包含图像的 div 的实际名称或图像的路径
jsfiddle.net/Sjc9G 这是我文档中的 jsFiddle。出于某种原因，该脚本无法在那里运行，但在 Dreamweaver 中运行。