Question

帮助请理解这个问题。每个选项卡中都有标签，iframe，iframe的底部有一个系列开关替换iframe中的src，但是如果你切换到第二个标签并点击系列，src会因某种原因被替换在第一个选项卡中，而不是在第二个选项卡中。怎么解决？请帮帮我。

标签

    jQuery('ul.tabs').each(function(){

    var $active, $content, $links = jQuery(this).find('a');

    $active = jQuery($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    $links.not($active).each(function () {
        jQuery(this.hash).hide();
    });

    jQuery(this).on('click', 'a', function(e){

        $active.removeClass('active');
        $content.hide();

        $active = jQuery(this);
        $content = jQuery(this.hash);

        $active.addClass('active');
        $content.show('fade');

        e.preventDefault();
    });
});

切换系列

$('.s-link').on('click', function(){
  $('#series').attr('src', $(this).attr('data-src'));
});

CSS

.tabs {display: flex;position: relative;overflow-x: auto;overflow-y: hidden;height: 48px;
background-color: #f5f5f5;width: 100%;white-space: nowrap;margin: 0px auto;}
.tab_content { background:#fff;padding:10px;width:100% }
.tabs li { display:inline;list-style:none;}
.tabs a {padding: 15px;color:#999;display:inline-block;text-decoration: none; }
.tabs a.active {background-color: #ff4f00;color:#fff }
.series-btn {list-style: none;}
.series-btn li {display:block;border-bottom:1px dashed #eee;padding:0 35px 0 18px;line-height:30px;
white-space:nowrap;cursor:pointer;color:#666;float:left;}

HTML

<ul class="tabs">
    <li><a href="#tab1">1</a></li>
    <li><a href="#tab2">2</a></li>
    <li><a href="#tab3">3</a></li>
</ul>
<div id="tab1" class="tab_content">
    <ul class="tabs">  
        <li><a href="#tab1-1">4</a></li>
        <li><a href="#tab1-2">5</a></li>
        <li><a href="#tab1-3">6</a></li>
        <li><a href="#tab1-4">7</a></li>
    </ul>
</div>

<div id="tab2" class="tab_content">
    <ul class="tabs">  
        <li><a href="#tab2-1">8</a></li>
        <li><a href="#tab2-2">9</a></li>
        <li><a href="#tab2-3">10</a></li>
        <li><a href="#tab2-4">11</a></li>
    </ul>
</div>

<div id="tab3" class="tab_content">
    <ul class="tabs">  
        <li><a href="#tab3-1">12</a></li>
        <li><a href="#tab3-2">13</a></li>
        <li><a href="#tab3-3">14</a></li>
        <li><a href="#tab3-4">15</a></li>
    </ul>
    <div id="tab3-1">
      <iframe id="series" class="embed-responsive-item" width="560" height="400" src="https://www.youtube.com/embed/Uw10XCyFP6E" frameborder="0" allowfullscreen=""></iframe>
      <ul class="series-btn">
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 1</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 2</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 3</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 4</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 5</li>
      </ul>
    </div>

  <div id="tab3-2">
      <iframe id="series" class="embed-responsive-item" width="560" height="400" src="https://www.youtube.com/embed/Uw10XCyFP6E" frameborder="0" allowfullscreen=""></iframe>
      <ul class="series-btn">
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 1</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 2</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 3</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 4</li>
        <li class="s-link" data-src="https://www.youtube.com/embed/cZBAGbQl1Hc">Episode 5</li>
      </ul>
    </div>
</div>

Answer 1

代码中的所有帧都具有相同的Id“系列”。 Id必须是唯一的字符串。像

一样改变它们

<iframe id="series1" ...
...
<iframe id="series2" ...

还要更新代码以使用不同的ID切换选项卡。

$('.s-link').on('click', function(){
  $('#series' + $(this).attr('data-id')).attr('src', $(this).attr('data-src'));
});

<li class="s-link" data-id="1" data-src="url1" ...
<li class="s-link" data-id="2" data-src="url2" ...

如何在标签中重启功能？

1 个答案: