Question

我创建了两组选项卡，但是当页面加载时，只有第一组选项卡默认加载内容，第二组只在我选择选项卡时加载内容。

所以我的问题是如何更改js或html以生成多组标签及其内容默认加载？

这是jsfiddle：http://jsfiddle.net/h9r2fy39/

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>

使用Javascript：

;(function($){
  $.fn.html5jTabs = function(options){
    return this.each(function(index, value){
      var obj = $(this),
      objFirst = obj.eq(index),
      objNotFirst = obj.not(objFirst);

      $("#" +  objNotFirst.attr("data-toggle")).hide();
      $(this).eq(index).addClass("active");

      obj.click(function(evt){

        toggler = "#" + obj.attr("data-toggle");
        togglerRest = $(toggler).parent().find("div.interestcontent");

        togglerRest.hide().removeClass("active");
        $(toggler).show().addClass("active");

        $(this).parent("div").find("a").removeClass("active");
$(this).addClass("active");
        return false;
      });
    });
  };
}(jQuery));

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

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

Answer 1

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

更改其中一个集的类名将解决此问题。

<强> Here is an updated Example

Answer 2

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

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

演示@ Fiddle

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

2 个答案: