默認情況下，第二組選項卡及其內容不會加載

我創建了兩組選項卡，但當頁面只加載第一組選項卡時默認加載內容，第二組選項僅在我選擇內容時加載內容標籤。默認情況下，第二組選項卡及其內容不會加載

所以我的問題是如何更改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;}

來源

2015-04-06 ChosenJuan

你只需要抓住每個interesttabs和插件綁定到他們的內部a，象下面這樣：

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

演示@Fiddle

來源

2015-04-06 17:25:35 lshettyl

謝謝，我仍然在學習jquery，但這是一個很大的幫助。乾杯! – ChosenJuan

這是因爲你是我們爲兩組選項卡使用相同的類名.interesttabs。

更改其中一個集合的類名將修復它。

Here is an updated Example

來源

2015-04-06 17:19:37 Und3rTow

默認情況下，第二組選項卡及其內容不會加載

回答

相關問題