jQuery選項卡 - 啓用和禁用

我在點擊第一個按鈕時如何禁用選項卡3有問題。當我點擊Activate 2nd tab時，第二個選項卡將被啓用，但第三個選項卡也將被啓用;當我點擊Activate 3rd tab時應該啓用它。jQuery選項卡 - 啓用和禁用

我該怎麼辦？

<div class="tab-wrapper" id="tab-wrapper"> 
    <div class="tab-header"> 
    <ul class="tabs"> 
     <li><a href="#tab1">Step 1</a></li> 
     <li><a href="#tab2">Step 2</a></li> 
     <li><a href="#tab3">Step 3</a></li> 
    </ul> 
    </div> 
    <div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     this is tab 1 
     <button id="button2">Activate 2nd tab</button> 
    </div> 
    <div id="tab2" class="tab_content"> 
     this is tab 2 
     <button id="button3">Activate 3rd tab</button> 
    </div> 

    <div id="tab3" class="tab_content"> 
     This is tab3 

    </div> 
    </div> 
</div> 

</body> 

<script type="text/javascript"> 

    $(function() { 

    var activate = false, 
    tabLinks = $('.tabs a'), 
    tabContent = $('.tab_container').children(); 

    tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup 
    $('#tab2').hide(); 
    $('#tab3').hide(); // Hide second tab 


    tabLinks.bind('click', function(e) { 
     e.preventDefault(); 
     if(activate === true) { // Only do something if button has been clicked 
     var target = this.hash, 
      el = $(this); 

     tabLinks.filter('.active').removeClass('active'); 
     el.addClass('active'); 

     tabContent.hide(); // Hide all 
     $(target).show(); // Show selected 
     } 
    }); 

    $('#button2').bind('click', function() { 
     activate = true; // Activate tab functionality 
     tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link 
    }); 

    $('#button3').bind('click', function() { 
     activate = true; // Activate tab functionality 
     tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link 
    }); 

    }); 
</script> 
</html>

來源

2016-08-19 Seulgi Bear

@Epodax實際上是我的PHP文件的內容。 –

好吧..我明白:) –

你有什麼想法解決我的問題？ –

你可以做這樣的事情（使用數組知道如果標籤已經被激活，而不是隻有一個布爾值）：

$(function() { 
 

 

 
    var activate = [true, false, false], 
 
    tabLinks = $('.tabs a'), 
 
    tabContent = $('.tab_container').children(); 
 

 
    tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup 
 
    $('#tab2').hide(); // Hide second tab 
 
    $('#tab3').hide(); // Hide second tab 
 

 
    tabLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 
    var idx = $(this).data('index'); 
 
    if (activate[idx] === true) { // Only do something if button has been clicked 
 
     var target = this.hash, 
 
     el = $(this); 
 

 
     tabLinks.filter('.active').removeClass('active'); 
 
     el.addClass('active'); 
 

 
     tabContent.hide(); // Hide all 
 
     $(target).show(); // Show selected 
 
    } 
 
    }); 
 

 
    $('button').on('click', function() { 
 
    var index = $(this).data('index'); 
 
    activate[index] = true; // Activate tab functionality 
 
    tabLinks.eq(index).trigger('click'); // Trigger a click on the second tab link 
 
    }); 
 

 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
    
 
body { 
 
    margin: 30px; 
 
} 
 
    
 
.tab-wrapper { 
 
    width: 500px; 
 
} 
 
    
 
.tabs { 
 
    overflow: hidden; 
 
    list-style: none; 
 
} 
 
    
 
.tabs li { 
 
    float: left; 
 
    margin-right: 10px; 
 
    border: 1px solid #ccc; 
 
    border-bottom: 0; 
 
} 
 
    
 
.tabs a { 
 
    display: block; 
 
    padding: 5px; 
 
    width: 100px; 
 
} 
 
    
 
.tabs a.active { 
 
    background: #efefef; 
 
} 
 
    
 
.tab_container > div { 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
} 
 
    
 
button { 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="tab-wrapper" id="tab-wrapper"> 
 
    <div class="tab-header"> 
 
     <ul class="tabs"> 
 
     <li><a href="#tab1" data-index="0">step1</a></li> 
 
     <li><a href="#tab2" data-index="1">step2</a></li> 
 
     <li><a href="#tab3" data-index="2">step3</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="tab_container"> 
 
     <div id="tab1" class="tab_content"> 
 
     here is the list of the overview 
 
     <button data-index="1">Activate 2nd tab</button> 
 
     </div> 
 
     <div id="tab2" class="tab_content"> 
 
     here is the list of the overview 
 
     <button data-index="2">Activate 3nd tab</button> 
 
     </div> 
 
     <div id="tab3" class="tab_content"> 
 
     End 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
</body>

你可以找到的代碼在jsfiddle上：

https://jsfiddle.net/psLshz3u/

來源

2016-08-19 09:30:43

非常感謝你:)我會試試這個:) –

它給我不同的輸出:( –

你應該解釋你的問題，以獲得一些關於它的幫助。 –

jQuery選項卡 - 啓用和禁用

回答

相關問題