web-gelistirme-sc.com

JQuery ile basit sekmeler nasıl oluşturulur?

Aşağıdaki koda sahibim: fiddle

Hangi web sitelerinde harika çalışıyor Ben kendimi yaratıyorum ve hiçbir JS olmadan sekmeler ilgili bölümlere atlamalı bağlantılar olarak hareket ediyor. Ismarlama CMS'ye yerleştirildiğinde, atlama linkleri çalışmadığı anda kullanmak zorunda kalıyorum. JS olmadan çalışmasını sağlayan sekmelere daha fazla göreli bağlantı eklemeyi denedim ancak JS ile sekmeli içerik gösterilmiyor.

Bir şey mi eksik?

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');    
}
9
Ashley Briscoe

Web sitenizin href ile ilgili sorunları olduğunu tahmin ediyorum, kullanıcı bir href'i tıkladığında web sitesinin kendisini otomatik olarak ortadan kaldırdığını tahmin ediyorum.

İşte yeni çözümün jsFiddle'ı.

Senin için yeni bir çözümüm var:

jQuery güncellendi:

$('#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');
 }
});

yeni html biçimlendirme:

<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>
22
Barlas Apaydin
$(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
    }
});

});

Demoyu Gör: http://jsfiddle.net/pradeepk00786/5ezT3/

7
user2185340

Çözüm JSFiddle :: https://jsfiddle.net/incorelabs/mg6e4ren/

Sekmeleri uygulamak gerçekten çok basit, sorunuz için HTML’yi biraz değiştirdim. Bağlantı etiketleri kaldırıldı, çünkü bunlar gerekli değil.

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-Mystified

  1. Her "li" elementine "tab-switcher" sınıfını ekleyin.
  2. Her "li" ye "data-tab-index" niteliği verin.
  3. Her sekmeli kapsayıcıya "tab-container" sınıfını ekleyin. Ayrıca, "li" öğesindeki "data-tab-index" özniteliğine karşılık gelen her kaba bir "data-tab-index" özniteliği sağlayın.
  4. Yalnızca görünür olmasını istediğiniz kabı gösterin, diğerlerini "display: none" kullanarak gizleyin.
  5. Sekmeli kapların tüm içeriği için bir üst kap sağlayın. Bu örnekte bu "allTabsContainer" div'dir.

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-Mystified

  1. "Sekme değiştirici" deki tıklama dinleyicisi "document.ready" da başlatılıyor.
  2. "ÖncekiActiveTabIndex" değişkeni önceki aktif sekmenin kaydını tutar, böylece aynı sekmeye tekrar tekrar basarsak göz ardı edilebilir.
  3. "Tab-container" üzerinde bir EACH döngüsü çalıştırıyoruz. Bu, hangi sekmenin gösterilmesi gerektiğini bilmek için yapılır. Her eşleşmede "data-tab-index" veri özniteliği varsa, o sekmeyi görüntüleriz.
  4. Tıklanan önceki sekmeyi takip etmemize yardımcı olan "öncekiActiveTabIndex" içine kaydedilen "data-tab-index" değerini koruyoruz.

Şüphe varsa veya birinin önerileri varsa, gönderi hakkında yorum yapın.

3
incorelabs
    <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>

buraya tıklayın

0
Sanket Patil

Duyarlı Sekmeler with Otomatik Kullan özelliği . Bunların herhangi bir eklentiye ihtiyacı yok

Demo Bağlantısı

Kaynak Bağlantısı

 enter image description here  enter image description here

HTML

    <div class="row responsive-tab-wrapper">
        <div class="col-md-3 tab-items-list">
            <ul class="resp-tabs-list">
                <li class="resp-tab-item">TAB 1</li>
                <li class="resp-tab-item">TAB 2</li>
                <li class="resp-tab-item">TAB 3</li>
            </ul>
        </div>
        <div class="col-md-9 resp-tabs-container">
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 1 TITLE</h4>
                    <p>
                        TAB 1 CONTENT
                    </p>

                </div>
            </div>
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 2 TITLE</h4>
                    <p>
                        TAB 2 CONTENT
                    </p>
                </div></div>
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 3 TITLE</h4>
                    <p>
                        TAB 3 CONTENT
                    </p>
                </div>
            </div>
        </div>
    </div>

CSS

    .responsive-tab-wrapper{
        -webkit-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        margin-top: 50px;
        padding: 15px
    }
    .resp-tabs-container{
        padding: 30px;

    }    
    .resp-tabs-list {
        padding: 0;
    }

    .resp-tabs-list i {
        margin-right: 15px;
        font-size: 24px;
    }

    .resp-tabs-list li {
        cursor: pointer;
        border-bottom: solid 1px #e4eae1;
        line-height: 55px;
        padding-left: 15px;
        font-weight: 300;
        font-size: 18px;
        /* transition: all 0.5s ease; */
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        font-family: 'Hammersmith One', sans-serif;
        text-transform: uppercase;
        border-left: solid 2px #fff;
        list-style: none;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: Ellipsis;
    }

    .resp-tabs-list li:hover,
    .resp-tabs-list li.resp-tab-active,
    h3.resp-accordion:hover {
        background-color: #ffffff;
        /* border-bottom: 1px solid #BFE1B1; */
        border-left: solid 2px #3bc500;

    }



    h3.resp-tab-active,
    h3.resp-tab-active:hover {
        border-bottom: 1px solid #e7edee;
    }

    h3.resp-accordion {
        cursor: pointer;
        font-size: 18px;
        display: none;
        font-weight: 300;
        border-bottom: 1px solid #e7edee;
        margin: 0;
        line-height: 66px;
        transition: all 0.7s ease;
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        -o-transition: all 0.7s ease;
    }

    h3.resp-accordion:hover {}

    .resp-tab-content {
        display: none;
    }

    .resp-content-active,
    .resp-accordion-active {
        display: block;
    }


    /*-----------Vertical tabs-----------*/
    .resp-arrow {
        width: 0;
        height: 0;
        float: right;
        margin-top: 27px;
        margin-right: 15px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid;
    }

    h3.resp-tab-active span.resp-arrow {
        border: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid;
    }

    /*-----------Accordion styles-----------*/
    h3.resp-tab-active {
        background: #dbfdcc;
        /* !important;*/
        border-color: #d3efc8;
    }

    .resp-easy-accordion h3.resp-accordion {
        display: block;
    }

    .resp-jfit {
        width: 100%;
        margin: 0px;
    }

    .resp-tab-content-active {
        display: block;
        background: #e7edee;
        padding: 0 25px 25px;
    }

    .prod-tab-content img{
        width: 300px;
        float: right;
    }

    /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
    @media only screen and (max-width: 980px) {
        ul.resp-tabs-list {
            display: none;
        }

        h3.resp-accordion {
            display: block;
            padding-left: 25px;
        }
        .resp-accordion-closed {
            display: none !important;
        }
        .prod-tab-content{
            padding: 10px;
        }
    }

jQuery

 $(function () {
        var startItemIndex = 0;
        var tabItemContainer = ".resp-tabs-container";
        var tabItemList = $(".resp-tabs-list");
        var tabInterval;
        var tabIntervalTime = 3000; //In milliseconds
        var stopOnHover = true;

        tabItemList.find(".resp-tab-item").each(function(index,val){
            var itemHeading = $(this).html();
            $(tabItemContainer).find(".resp-tabs-container-item").eq(index).before('<h3 class="resp-accordion" data-listindex="'+index+'"><span class="resp-arrow"></span>'+itemHeading+'</h3>');
        });

        $(tabItemContainer).find(".resp-tabs-container-item h3.resp-accordion").on("click", function () {
                var itemIndex = $(this).index();
                changeIndex(itemIndex);
                clearInterval(tabInterval);
                startAutoTab();
            });

        function changeIndex(itemIndex) {
            tabItemList.find(".resp-tab-item").removeClass("resp-tab-active");
            tabItemList.find(".resp-tab-item:eq(" + itemIndex + ")").addClass("resp-tab-active");

            if($(window).width()<980){
                $(tabItemContainer).find(".resp-tabs-container-item").slideUp();
                $(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().slideDown();
            }else{
                $(tabItemContainer).find(".resp-tabs-container-item").hide();
                $(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().fadeIn();
            }

            $(tabItemContainer).find("h3.resp-accordion").removeClass("resp-tab-active");
            $(tabItemContainer).find("h3.resp-accordion").eq(itemIndex).addClass("resp-tab-active");

        }
        changeIndex(startItemIndex);
        tabItemList.find(".resp-tab-item").on("click", function () {
            var itemIndex = $(this).index();
            changeIndex(itemIndex);
            clearInterval(tabInterval);
            startAutoTab();
        });

        $(document).find(tabItemContainer).find("h3.resp-accordion").on("click", function () {
            var itemIndex = $(this).attr("data-listindex");
            changeIndex(itemIndex);
            clearInterval(tabInterval);
            startAutoTab();
        });
        function startAutoTab() {
            tabInterval = setInterval(function () {
                var isHovered = false;
                if(stopOnHover)
                isHovered = ($('ul.resp-tabs-list').is(":hover") || $('div.resp-tabs-container').is(":hover"));
                if (!isHovered) {
                    var totalTabs = tabItemList.find(".resp-tab-item").length;
                    if (totalTabs == ($("ul.resp-tabs-list .resp-tab-item.resp-tab-active").index() + 1)) {
                        $(".resp-tab-item").eq(0).trigger("click");
                    } else {
                        $(".resp-tab-item.resp-tab-active").next().trigger("click");
                    }
                }
            }, tabIntervalTime);
        }
        startAutoTab();
    });
0
Code Spy

Jquery'yi dahil et:

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

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

0
Ilyas karim