Javascript 默认情况下，不会加载第二组选项卡及其内容

我创建了两组选项卡，但是当页面仅加载第一组选项卡时，默认情况下，第二组选项卡仅在我选择选项卡时加载内容

所以我的问题是，在默认情况下，如何更改js或html以生成多组选项卡及其内容加载

以下是JSFIDLE：

HTML：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <div class="interesttabs">
    <a data-toggle="visited1">Countries</a>
    <a data-toggle="visited2">States</a>
    <a data-toggle="visited3">Places</a>
    <a data-toggle="visited4">Counties</a>
  </div>

<div class="interestcontent">  
  <div id="visited1" class="interestcontent">
                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">America</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>
  </div>

  <div id="visited2" class="interestcontent">

                  <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">America</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamdddas</p></div>
  </div>

  <div id="visited3" class="interestcontent">

                   <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Amereeeica</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curaceeeao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexeeeico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>
  </div>

  <div id="visited4" class="interestcontent">

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">ooomerica</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>
  </div>



</div>








                      <div class="interesttabs">
    <a data-toggle="visited5">other Countries</a>
    <a data-toggle="visited6">other States</a>
    <a data-toggle="visited7">other Places</a>
    <a data-toggle="visited8">other Counties</a>
  </div>

<div class="interestcontent">  
  <div id="visited5" class="interestcontent">
                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">America</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>
  </div>

  <div id="visited6" class="interestcontent">

                  <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">America</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamdddas</p></div>
  </div>

  <div id="visited7" class="interestcontent">

                   <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Amereeeica</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curaceeeao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexeeeico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Korea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahamas</p></div>
  </div>

  <div id="visited8" class="interestcontent">

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">ooomddderica</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Curddacao</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Mexico</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">fKorea</p></div>

                <div class="infopics"> <img src="images/nopicsmall.png"><p class="imageword">Bahafmas</p></div>
  </div>



</div>

css：

.interesttabs a{
  cursor: pointer;
  padding: 5px;
   font: normal 14px Arial, Sans-serif;
  color: #000; font-weight:bold;

  border-bottom: 0;
}
.interesttabs a.active{
 color:#33CCFF;
   cursor: pointer;
}


.interesttabs a:hover { text-decoration:underline;}

.tabContent{
  border: 1px solid #aaa;
  margin: 4px 0;
  padding: 5px;
}


.infopics { margin-top:10px; margin-right:15px; display: inline-block; cursor: pointer; }

.imageword {margin-left:10px;cursor: pointer;  font: normal 13px Arial, Sans-serif; }

.imageword:hover {text-decoration:underline;}

---

这是因为两组选项卡使用相同的类名.interesttabs

更改其中一个集合的类名将修复它

---

您只需抓取每个InterestAbs并将插件绑定到其中的a，如下所示：

$(function() {
    $(".interesttabs").each(function() {
        $(this).find("a").html5jTabs();
    });
});

---

Demo@

谢谢，我还在学习jquery，但这对我帮助很大。干杯

$(function() {
    $(".interesttabs").each(function() {
        $(this).find("a").html5jTabs();
    });
});