Làm thế nào để xây dựng các tab đơn giản với jQuery?

Question

Tôi có mã sau: fiddle

Tác phẩm nào tuyệt vời trên trang web mà tôi tự tạo và không JS làm các liên kết nhảy tới các phần liên quan. Khi được đặt trong CMS riêng biệt, tôi buộc phải sử dụng tại thời điểm các liên kết nhảy không hoạt động. Tôi đã thử thêm các liên kết tương đối nhiều hơn vào các tab mà làm cho nó hoạt động với không JS nhưng với JS các nội dung theo thẻ không hiển thị.

Tôi có thiếu gì đó không?

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

Tôi đoán trang web của bạn đang gặp vấn đề với href, tôi đoán rằng khi người dùng nhấp a href, trang web sẽ tự động xóa bỏ bản thân .

Here is new solution's jsFiddle.

tôi có một giải pháp mới cho bạn:

cập nhật 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'); 
} 
}); 

---

đánh dấu html mới:

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

});

Xem Demo: 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> 

Bấm here

Answer 4

Giải pháp JSFiddle ::https://jsfiddle.net/incorelabs/mg6e4ren/

Thực hiện Tabs là thực sự đơn giản, tôi đã sửa đổi HTML cho câu hỏi của bạn một chút. Loại bỏ các thẻ neo coz họ không cần thiết.

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 De-hoang mang

1. Thêm lớp "bằng tab switcher" để mỗi phần tử "li".
2. Cung cấp thuộc tính "chỉ mục tab dữ liệu" cho từng "li".
3. Thêm lớp "tab-container" vào mỗi Vùng chứa được gắn thẻ. Cũng cung cấp thuộc tính "data-tab-index" cho mỗi vùng chứa tương ứng với thuộc tính "data-tab-index" trên phần tử "li".
4. Chỉ hiển thị vùng chứa bạn muốn hiển thị, ẩn các vùng chứa khác bằng cách sử dụng "display: none".
5. Cung cấp vùng chứa cấp độ gốc cho tất cả nội dung của các vùng chứa tab. Trong ví dụ này, đây là div "allTabsContainer".

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 De-hoang mang

1. Người nghe nhấp chuột vào "tab switcher" được khởi tạo vào "document.ready" .
2. Biến "previousActiveTabIndex" giữ một ca khúc của tab hoạt động trước đó để nếu chúng ta nhấn vào cùng một tab một lần nữa và một lần nữa, nó có thể được bỏ qua.
3. Chúng tôi chạy vòng lặp EACH trên "tab-container". Điều này được thực hiện để biết tab nào sẽ được hiển thị. Nếu thuộc tính dữ liệu "data-tab-index" trên mỗi kết quả phù hợp, chúng tôi sẽ hiển thị tab đó.
4. Chúng tôi giữ giá trị của "chỉ mục dữ liệu-chỉ mục" được lưu trong "previousActiveTabIndex" giúp chúng tôi theo dõi tab trước đã được nhấp.

Nếu có nghi ngờ hoặc nếu ai đó có đề xuất, hãy nhận xét về bài đăng.

Answer 5

Bao gồm 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"); 
}); 

Điều: http://www.wapgee.com/story/i/201 Demo: http://codepen.io/iksdatoo/pen/NjOZrm