Question

目前我有一个带有＆＃34; 1st-image＆＃34;的div。内。这是每个选项卡的默认值。但是，当我点击href 2时，我不仅要更改标签，还要将图像更改为第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();
});

Answer 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的左侧面板上选择框架和扩展下的jQuery 2.1.0。当您点击每个链接时，我在上面命名为image1的图片会发生变化。

Jquery在单击时删除/添加图像

1 个答案: