用于选项卡面板的可重用Javascript_Javascript_Tabs

用于选项卡面板的可重用Javascript

javascript tabs

用于选项卡面板的可重用Javascript,javascript,tabs,Javascript,Tabs,（很抱歉，我无法嵌入第二个图像）我有上面两个元素，每个元素都使用相同的javascript，它根据所选的选项卡/药丸加载并更改元素的内容。内容加载在活动元素中按预期工作，该元素的内容正确。但是，当活动元素内容发生变化时，活动元素中的内容变为空白。（注意，图片相同，但文本不同）此时，我确实有意让两个主选项卡都具有相同的项目#直到我将其修复，所以这不是一个错误，只是一个让活动内容重新加载的解决方法我不知道如何让javascript在一个元素中完全独立地工作，而不影响另一个元素我有一个工作版本

（很抱歉，我无法嵌入第二个图像）

我有上面两个元素，每个元素都使用相同的javascript，它根据所选的选项卡/药丸加载并更改元素的内容。内容加载在活动元素中按预期工作，该元素的内容正确。但是，当活动元素内容发生变化时，活动元素中的内容变为空白。（注意，图片相同，但文本不同）

此时，我确实有意让两个主选项卡都具有相同的项目#直到我将其修复，所以这不是一个错误，只是一个让活动内容重新加载的解决方法

我不知道如何让javascript在一个元素中完全独立地工作，而不影响另一个元素

我有一个工作版本发布在位于

我知道这涉及到

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

我只是不知道如何使这两条线只影响活动元素。我曾希望，通过在脚本的前面添加元素id和合并元素是关键。这有帮助，但并不完全

我已经在选项卡图像的默认行为下面添加了一张错误行为的图片。这将显示每个元素上显示的第二个选项卡，以及如何在活动元素显示其正确内容时清空非活动元素的内容

我希望非活动元素保留在默认的首页上，没有活动，没有内容更改，它不参与（或者无论如何都不应该参与）。同样，我试图修复的工作代码是在jsfiddle上的，它精确地显示了我试图描述的行为（如果相当糟糕的话）

我非常感谢您提供的任何信息

我认为您需要以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>


会见团队

main
bio
认证

Lorem ipsum dolor sit amet，奉献精英。Eos阻抗别名为ipsam ea，它是一种特殊的面部疾病，主要表现为在无症状的情况下，是否患有先天性痴呆、透明症以及其他疾病？厄俄斯，苏西比特？

克里斯托弗·西格尔
LTC/CHL、高级枪支和安全培训师
生物生物
生物生物
认证
认证证书

MAIN
BIO
认证

Lorem ipsum dolor sit amet，奉献精英。Eos阻抗别名为ipsam ea，它是一种特殊的面部疾病，主要表现为在无症状的情况下，是否患有先天性痴呆、透明症以及其他疾病？厄俄斯，苏西比特？

迈克·琼斯
安全培训师
BIO1 BIO1 BIO1 BIO1 BIO1
生物生物
证书1
认证证书

在我看来，您已经深入了解了这方面的细节，而没有首先让我们知道您正在努力实现什么，以及什么不起作用。你能从这里开始吗，任何人都可以发布一个简单的例子来演示你要做的事情吗？我要做的是在两个独立的元素中设置一组选项卡，它们相互独立地工作。这些元素是关于一个人的个人总结。因此，一个选项卡用于默认加载的主信息，第二个选项卡是他们的传记，第三个选项卡是他们的证书列表。我在上面列出的JSFIDLE上有一个工作示例，这就是为什么我没有在这里留出空间来这样做，因为我认为完整地查看工作模型是最好的。不起作用的是，当在活动元素中选择选项卡时，未使用的元素变为空白。

 <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>