如何使用jQuery構建簡單的選項卡？

Question

我有以下代碼：fiddle

這對我創建我自己並且沒有JS的網站很有用，這些標籤充當跳轉鏈接到相關部分。當放置在定製的CMS中時，我不得不使用跳轉鏈接不起作用。我已經嘗試添加更多的相關鏈接到選項卡，這使得它沒有JS的工作，但與JS選項卡式的內容不顯示。

我錯過了什麼嗎？

HTML：

<ul id="tabs"> 

     <li><a href="#tab1">test1</a></li> 
     <li><a href="#tab2">test2</a></li> 
     <li><a href="#tab3">test3</a></li> 
     <li><a href="#tab4">test4</a></li> 

</ul> 
     <div class="container" id="tab1">Some content</div> 
     <div class="container" id="tab2">Some content</div> 
     <div class="container" id="tab3">Some content</div> 
     <div class="container" id="tab4">Some content</div> 

的jQuery：

$('#tabs li a:not(:first)').addClass('inactive'); 
$('.container').hide(); 
$('.container:first').show(); 
$('#tabs li a').click(function(){ 
    var t = $(this).attr('href'); 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 
    $('.container').hide(); 
    $(t).fadeIn('slow'); 
    return false; 
}) 

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 
    $('.container').hide(); 
    $(t).fadeIn('slow');  
} 

Answer 1

我猜你的網站是有與HREF的問題，我相信，當用戶點擊HREF，網站會自動消除自身。

Here is new solution's jsFiddle.

我對你有一個新的解決方案：

更新的jQuery：

$('#tabs li a').click(function(){ 
    var t = $(this).attr('id'); 

    if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');   
    $(this).removeClass('inactive'); 

    $('.container').hide(); 
    $('#'+ t + 'C').fadeIn('slow'); 
} 
}); 

---

新的HTML標記：

<ul id="tabs"> 

     <li><a id="tab1">test1</a></li> 
     <li><a id="tab2">test2</a></li> 
     <li><a id="tab3">test3</a></li> 
     <li><a id="tab4">test4</a></li> 

</ul> 
<div class="container" id="tab1C">1Some content</div> 
<div class="container" id="tab2C">2Some content</div> 
<div class="container" id="tab3C">3Some content</div> 
<div class="container" id="tab4C">4Some content</div> 

Answer 2

$(document).ready(function() { 
$("#content div").hide(); // Initially hide all content 
$("#tabs li:first").attr("id","current"); // Activate first tab 
$("#content div:first").fadeIn(); // Show first tab content 
$('#tabs li a').click(function(e) { 
    e.preventDefault(); 
    if ($(this).attr("id") == "current"){ //detection for current tab 
    return  
    } 
    else{    
    $("#content div").hide(); //Hide all content 
    $("#tabs li").attr("id",""); //Reset id's 
    $(this).parent().attr("id","current"); // Activate this 
    $($(this).attr('href')).fadeIn(); // Show content for current tab 
    } 
}); 

}）;

見演示： http://jsfiddle.net/pradeepk00786/5ezT3/

Answer 3

<script> 
$('.tabheading li').click(function() { 
     var tabid = $(this).attr("rel"); 
     $(this).parents('.tabcontainer').find('.active').removeClass('active'); 
     $('.tabbody').hide(); 
     $('#' + tabid).show(); 
     $(this).addClass('active'); 

     return false; 
    }); 
</script> 

點擊here

Answer 4

解決方案的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德大惑不解

1. 添加 「選項卡，切換器」 類，每一個 「禮」 元素。
2. 爲每個「li」賦予一個「data-tab-index」屬性。
3. 將「tab-container」類添加到每個選項卡式容器。還爲每個容器提供一個「data-tab-index」屬性，該屬性對應於「li」元素上的「data-tab-index」屬性。
4. 僅顯示您希望看到的容器，使用「display：none」隱藏其他容器。
5. 爲選項卡式容器的所有內容提供父容器。在這個例子中，這是「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的德大惑不解

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

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

Answer 5

包括jQuery的：

https://code.jquery.com/jquery-3.1.1.min.js 

HTML：

<br> 
<div align="center" > 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button> 
</div> 
<br /> 
<div class="gtabs demo" > 
    <div class="gtab active tab-1"> 
    <h1>Gtab 1</h1> 
    <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button> 
    </div> 

    <div class="gtab tab-2"> 
    <h1>Gtab 2</h1> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore. 
    </p> 
    </div> 

    <div class="gtab tab-3"> 
    <h1>Gtab 3</h1> 
    </div> 
</div> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui. 
</p> 

CSS：

.gtabs { 
    position: relative; 
    .gtab { 
    background: #eee; 
    position: absolute; 
    width: 100%; 
    opacity: 0; 
    visibility: hidden; 
    padding: 10px; 
    top: 5px; 
    transition: all 0.4s; 
    &.active { 
     opacity: 1; 
     visibility: visible; 
     top: 0; 
     transition: all 0.4s; 
    } 
    } 
} 

JS：

$("[data-toggle='tab']").click(function() { 
    var tabs = $(this).attr('data-tabs'); 
    var tab = $(this).attr("data-tab"); 
    $(tabs).find(".gtab").removeClass("active"); 
    $(tabs).find(tab).addClass("active"); 
}); 

文章：http://www.wapgee.com/story/i/201 演示：http://codepen.io/iksdatoo/pen/NjOZrm