it-swarm.com.de

Wie erstelle ich einfache Tabs mit jQuery?

Ich habe den folgenden Code: Geige

Was in Websites, die ich selbst erstelle, hervorragend funktioniert und ohne JS fungieren die Registerkarten als Sprunglinks zu den relevanten Abschnitten. Wenn ich in das maßgeschneiderte CMS gestellt werde, bin ich gezwungen, im Moment die Sprungverbindungen zu benutzen, die nicht arbeiten. Ich habe versucht, mehr relative Links zu den Registerkarten hinzuzufügen, wodurch es ohne JS funktioniert, aber mit JS wird der Inhalt mit Registerkarten nicht angezeigt.

Vermisse ich etwas?

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

Ich vermute, Ihre Website hat Probleme mit href. Ich gehe davon aus, dass sich die Website automatisch auslöst, wenn ein Benutzer auf eine href klickt.

Hier ist jsFiddle der neuen Lösung.

Ich habe eine neue Lösung für Sie:

jQuery aktualisiert:

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

neues HTML-Markup:

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

});

Siehe Demo: http://jsfiddle.net/pradeepk00786/5ezT3/

7
user2185340

Lösung JSFiddle :: https://jsfiddle.net/incorelabs/mg6e4ren/

Das Implementieren von Tabs ist sehr einfach, ich habe den HTML-Code für Ihre Frage ein wenig geändert. Die Anker-Tags wurden entfernt, da sie nicht benötigt werden.

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. Fügen Sie jedem "li" -Element die Klasse "tab-switcher" hinzu.
  2. Geben Sie jedem "li" ein "data-tab-index" -Attribut.
  3. Fügen Sie jedem Tabbed Container die Klasse "tab-container" hinzu. Geben Sie außerdem für jeden Container ein Attribut "data-tab-index" an, das dem Attribut "data-tab-index" im Element "li" entspricht.
  4. Zeigen Sie nur den Container an, den Sie anzeigen möchten, und blenden Sie die anderen mit "display: none" aus.
  5. Stellen Sie einen übergeordneten Container für den gesamten Inhalt der Container mit Registerkarten bereit. In diesem Beispiel ist dies das 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 enträtselt

  1. Der Klicklistener auf dem "Tab-Switcher" wird auf "document.ready" initialisiert.
  2. Die Variable "previousActiveTabIndex" verfolgt den vorherigen aktiven Tab, sodass wir ihn immer wieder ignorieren können, wenn wir denselben Tab immer wieder drücken.
  3. Wir führen eine JEDE Schleife für den "Tab-Container" aus. Dies geschieht, um zu wissen, welche Registerkarte angezeigt werden soll. Wenn das Datenattribut "data-tab-index" bei jedem Treffer übereinstimmt, wird dieses Register angezeigt.
  4. Wir behalten den Wert des "data-tab-index" in "previousActiveTabIndex", der uns hilft, den vorherigen Tab, auf den Sie geklickt haben, zu behalten.

Wenn Zweifel bestehen oder jemand Vorschläge hat, kommentiere den Beitrag.

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>

Klicken Sie auf hier

0
Sanket Patil

Responsive Tabs mit AutoPlay-Funktion . Diese benötigen kein Plugin

Demo Link

Quelllink

 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 einschließen:

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

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

0
Ilyas karim