it-roy-ru.com

Как создавать простые вкладки с помощью jQuery?

У меня есть следующий код: 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');    
}
9
Ashley Briscoe

Я предполагаю, что у вашего сайта проблемы с href, я предполагаю, что когда пользователь нажимает href, сайт автоматически уничтожает себя.

Вот новое решение 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>
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
    }
});

});

См. Демонстрацию: http://jsfiddle.net/pradeepk00786/5ezT3/

7
user2185340

Решение 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. Добавьте класс «tab-switcher» к каждому элементу «li».
  2. Присвойте атрибут «data-tab-index» каждому «li».
  3. Добавьте класс «tab-container» для каждого контейнера с вкладками. Также предоставьте атрибут «data-tab-index» для каждого контейнера, который соответствует атрибуту «data-tab-index» в элементе «li».
  4. Показать только тот контейнер, который вы хотите видеть, скрыть остальные, используя «display: none».
  5. Предоставьте родительский контейнер для всего содержимого контейнеров с вкладками. В этом примере это 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 де-мистифицированный

  1. Слушатель щелчков на «tab-switcher» инициализируется на «document.ready».
  2. Переменная «previousActiveTabIndex» отслеживает предыдущую активную вкладку, поэтому, если мы снова и снова нажимаем на одну и ту же вкладку, ее можно игнорировать.
  3. Мы запускаем КАЖДЫЙ цикл на «вкладке-контейнере». Это сделано, чтобы узнать, какая вкладка должна отображаться. Если атрибут данных «data-tab-index» для каждого совпадения, мы отображаем эту вкладку.
  4. Мы сохраняем значение «data-tab-index», сохраненное в «previousActiveTabIndex», что помогает нам отслеживать предыдущую вкладку, по которой была нажата кнопка.

Если есть сомнения или у кого-то есть предложения, прокомментируйте сообщение.

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>

Нажмите здесь

0
Sanket Patil

Отзывчивые вкладки с функцией Автозапуск. Это не нуждается в плагине

ДЕМО-ССЫЛКА

ССЫЛКА НА ИСТОЧНИК

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:

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

0
Ilyas karim