Question

LINK TO IMAGE OF ERRANT BEHAVIOR（抱歉，我无法嵌入第二张图片）

我有上面两个元素，每个元素都使用相同的javascript，加载根据所选的tab / pill加载元素的内容。内容加载在活动元素中按预期工作，具有该元素的正确内容。然而，当活动元素内容发生变化时，活动元素会变为空白。（注意图片相同但文本不同）。

此时我故意将两个MAIN选项卡与相同的项目＃＃直到我得到修复，因此这不是每个说法的错误，只是一种解决方法，可以让活动内容再次加载。

我不确定如何让javascript在一个元素中完全独立，而不会影响其他元素。

我在位于Reusable tab script.

的jsfiddle发布了一个工作版本

$(document).ready(function() {
  $('#chris.tabs ul li.item, #mike.tabs ul li.item').on('click', function() {
    var number = $(this).data('option');
    $('#chris.tabs ul li.item, #mike.tabs ul li.item').removeClass('is-active');
    $(this).addClass('is-active');
    $('#tab_container .container_item').removeClass('is-active');
    $('div[data-item="' + number + '"]').addClass('is-active');
  });
});

我知道它涉及

$('#tab_container .container_item').removeClass('is-active');
$('div[data-item="' + number + '"]').addClass('is-active');

我只是不确定如何使这两行仅影响活动元素。我曾希望通过使用元素id并在脚本中加入前面的键是关键。它帮助但不完全。

我在标签图片的默认行为下面列出了错误行为的图片。这显示了每个元素上显示的第二个选项卡以及当活动元素显示其正确内容时如何清空非活动元素的内容。

我希望非活动元素保持其默认首页，不活动，不更改内容，不涉及（或不应该参与）。同样，我试图解决的工作代码是在jsfiddle JSFiddle of the issue上，它显示了我试图描述的行为（如果相当差）。

我非常感谢任何输入

Answer 1

我认为您需要定位ID。那些会更好。我调整了你的代码而不是最好的方法来了解它是如何工作的。但是有更简单，更清洁的方法来完成它。试试这个粗略的：

$(document).ready(function() {
    $('#tab_container').hide();
    $('#main').click(function(){
        $('#bio_info, #certifications_info').hide();
        $('#main').addClass('is-active');
        $('#bio, #certifications').removeClass('is-active');
        $('#main_info').addClass('is-active').show();
        $('#tab_container').show();
     });
     $('#bio').click(function(){
        $('#main_info, #certifications_info').hide();
        $('#bio').addClass('is-active');
        $('#main, #certifications').removeClass('is-active');
        $('#bio_info').addClass('is-active').show();
        $('#tab_container').show();
     });
     $('#certifications').click(function(){
     $('#main_info, #bio_info').hide();
     $('#certifications').addClass('is-active');
     $('#main, #bio').removeClass('is-active');
     $('#certifications_info').addClass('is-active').show();
     $('#tab_container').show();
  });
});

HTML是：

 <section id="meet">
 <div class="box">
 <header class="title">
  <h2> Meet The Team</h2>
</header>
<div class="columns">
  <div class="column">
    <div class="box box-meet">
      <article class="team has-text-centered">
        <tabs id="chris" class="tabs is-toggle is-toggle-rounded is-centered">
          <ul>
            <li class="tab item is-active" id="main" data-option="1"><a><i class="far fa-user-secret" data-fa-transform = "left-6"></i>MAIN</a></li>
            <li class="item" id="bio" data-option="2"> <a><i class="far fa-book" data-fa-transform = "left-6"></i>BIO</a></li>
            <li class="item" id="certifications" data-option="3"><a><i class="far fa-certificate" data-fa-transform = "left-6"></i>CERTIFICATIONS</a></li>
          </ul>
        </tabs>
      </article>
      <div class="box has-text-centered" id="tab_container">
        <div class="container_item is-active" id="main_info" data-item="1">
          <img class="is-round" src="assets/images/chris.jpg">
          <blockquote class="has-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos impedit alias ipsam ea sit aspernatur facere debitis dicta totam neque labore vel saepe nulla, perspiciatis, sequi eum eaque? Eos, suscipit?
          </blockquote>
          <hr>
          <p class="has-text-left">Christopher Siegle</p>
          <p class="has-text-left">LTC/CHL, Advanced Gun, and Security Trainer</p>
        </div>

        <div class="container_item" id="bio_info" data-item="2">
          <p>BIO BIO BIO BIO BIO</p>
          <H1> BIO BIO BIO BIO</H1>
        </div>
        <div class="container_item" id="certifications_info" data-item="3">
          <p>CERTIFICATIONS</p>
          <H1> CERTIFICATIONS CERTIFICATIONS CERTIFICATIONS</H1>
        </div>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="box box-meet">
      <article class="team has-text-centered">
        <tabs id="mike" class="tabs is-toggle is-toggle-rounded is-centered">
          <ul>
            <li class="item is-active" data-option="1"><a><i class="far fa-user-secret" data-fa-transform = "left-6"></i>MAIN</a></li>
            <li class="item" data-option="5"> <a><i class="far fa-book" data-fa-transform = "left-6"></i>BIO</a></li>
            <li class="item" data-option="6"><a><i class="far fa-certificate" data-fa-transform = "left-6"></i>CERTIFICATIONS</a></li>
          </ul>
        </tabs>
      </article>
      <div class="box has-text-centered" id="tab_container">
        <div class="container_item is-active" data-item="1">
          <img class="is-round" src="assets/images/chris.jpg">
          <blockquote class="has-text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos impedit alias ipsam ea sit aspernatur facere debitis dicta totam neque labore vel saepe nulla, perspiciatis, sequi eum eaque? Eos, suscipit?
          </blockquote>
          <hr>
          <p class="has-text-left">Mike Jones</p>
          <p class="has-text-left">Security Trainer</p>

        </div>

        <div class="container_item" data-item="5">
          <p>BIO1 BIO1 BIO1 BIO1 BIO1</p>
          <H1> BIO BIO BIO BIO</H1>
        </div>
        <div class="container_item" data-item="6">
          <p>CERTIFICATIONS1</p>
          <H1> CERTIFICATIONS CERTIFICATIONS CERTIFICATIONS</H1>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>

`

选项卡面板的可重用Javascript

1 个答案: