jquery的標籤頁切換

我有下面的腳本：jquery的標籤頁切換

var SwitchTabs = function(container, tabs, activeclass, which) { 
var tabContainers = $(container + ' > div'); 
var index = 0; 
var tabnum = (which) ? parseInt(which) - 1 : 0; 
tabContainers.filter(':eq(' + tabnum + ')').css({'display':'block'}); 
$(container + ' > ' + tabs).find('a').click(function(){ 
    index = $(this).parent().index(); 
    tabContainers.css({'display':'none'}).filter(':eq(' + index + ')').show(); 
    $(container + ' ' + tabs + ' ' + ' a').removeClass(activeclass); 
    $(this).addClass(activeclass); 
}).filter(':eq(' + tabnum + ')').click(); 
} 

$(function(){ 
SwitchTabs('div.tabs', 'ul.mostpouplar', 'active', 1); 
});

標記：


    <div class="tabs rrmodule"> 
    <h3>Popular</h3> 
    <ul class="mostpopular"> 
     <li><a href="#">Most Viewed</a></li> 
     <li><a href="#">Most Commented</a></li> 
    </ul> 

    <div> 
    Some content - tab 1 
    </div> 
    <div> 
    Some content - tab 2 
    </div> 
    </div>

上面（按照代碼）是應設置一個類至第一錨元件和顯示頁面加載時的第一個DIV。然後顯示DIV並根據點擊設置錨類。我正在使用jQuery 1.4.4。出於某種原因，點擊不起作用，onload設置類和顯示DIV都不起作用！我認爲代碼非常簡單。請有人可以幫我解決這個問題。

感謝，大號

來源

2011-03-10 lshettyl

有幾個問題，你不應該使用JavaScript關鍵字which作爲參數名稱。另外，您拼寫爲ui.mostpopular爲ul.mostpouplar。這是工作：

http://jsfiddle.net/magicaj/yFFaJ/2/

來源

2011-03-10 23:07:08

aw！那個錯字幾乎殺了我！謝謝湯姆亞當:) – lshettyl 2011-03-11 00:04:22

你想有這樣的事情：http://jqueryui.com/demos/tabs使用jQuery UI。或jQuery工具：標籤：http://flowplayer.org/tools/tabs/index.html。

來源

2011-03-10 23:19:35 Akarun

解決方案的jsfiddle ::https://jsfiddle.net/incorelabs/mg6e4ren/

實現標籤是非常簡單的，我已經修改了HTML你的問題有點。刪除了錨點標籤，因爲它們不是必需的。

HTML

<ul> 
    <li class="tab-switcher" data-tab-index="0">test1</li> 
    <li class="tab-switcher" data-tab-index="1">test2</li> 
    <li class="tab-switcher" data-tab-index="2">test3</li> 
    <li class="tab-switcher" data-tab-index="3">test4</li> 
</ul> 
<div id="allTabsContainer"> 
    <div class="tab-container" data-tab-index="0">Some content - 1</div> 
    <div class="tab-container" data-tab-index="1" style="display:none;">Some content - 2</div> 
    <div class="tab-container" data-tab-index="2" style="display:none;">Some content - 3</div> 
    <div class="tab-container" data-tab-index="3" style="display:none;">Some content - 4</div> 
</div>

HTML德大惑不解

添加「選項卡，切換器」類，每一個「禮」元素。
爲每個「li」賦予一個「data-tab-index」屬性。
將「tab-container」類添加到每個選項卡式容器。還爲每個容器提供一個「data-tab-index」屬性，該屬性對應於「li」元素上的「data-tab-index」屬性。
僅顯示您希望看到的容器，使用「display：none」隱藏其他容器。
爲選項卡式容器的所有內容提供父容器。在這個例子中，這是「allTabsContainer」div。

jQuery的

$(document).ready(function() { 

    var previousActiveTabIndex = 0; 

    $(".tab-switcher").on('click', function() { 

     var tabClicked = $(this).data("tab-index"); 

     if(tabClicked != previousActiveTabIndex) { 

      $("#allTabsContainer .tab-container").each(function() { 

       if($(this).data("tab-index") == tabClicked) { 

        $(".tab-container").hide(); 
        $(this).show(); 
        previousActiveTabIndex = $(this).data("tab-index"); 
        return; 

       } 
      }); 
     } 
    }); 
});

jQuery的德大惑不解

上的點擊監聽器「標籤，切換器」大幹快上「的document.ready」初始化。
變量「previousActiveTabIndex」保留上一個活動選項卡的軌跡，因此如果我們一次又一次按下同一個選項卡，則可以忽略它。
我們在「tab-container」上運行一個EACH循環。這是爲了知道哪個標籤應該顯示。如果每個數據屬性上的「data-tab-index」數據屬性匹配，我們將顯示該選項卡。
我們將「data-tab-index」的值保存在「previousActiveTabIndex」中，這有助於我們跟蹤前一個被點擊的選項卡。

如果有疑問或者有人有建議，請對帖子發表評論。

來源

2016-02-02 08:50:42 incorelabs

jquery的標籤頁切換

回答

相關問題