Вставка активного класса между вкладками

Question

У меня есть 6 вкладок на моей странице, они являются настраиваемыми вкладками из темы html, которую я разработал на основе файла .PSD. Каждая вкладка должна открывать «табу-контент» с этим атрибутом данных data-tab-active="true", если это ложь, то в CSS это отображение набора: none; к контенту. моя главная проблема здесь - установить класс «active» на вкладке «clicked» и удалить с предыдущей вкладки, а затем установить true в атрибуте data tab-content.

здесь мой jsfiddle: http://jsfiddle.net/cout1ofr/1/

HMTL:

<div class="tabs-container"> 
    <div class="tabs-btn"> 
     <ul> 
      <li class="active"><a href="#tab1">1</a></li> 
      <li><a href="#tab2">2</a></li> 
      <li><a href="#tab3">3</a></li> 
      <li><a href="#tab4">4</a></li> 
      <li><a href="#tab5">5</a></li> 
      <li><a href="#tab6">6</a></li> 
     </ul> 
    </div> 
    <div class="tabs-content-container"> 
     <div class="tab-content" data-tab-active="true" id="tab1"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 

     <div class="tab-content" data-tab-active="false" id="tab2"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 

     <div class="tab-content" data-tab-active="false" id="tab3"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 

     <div class="tab-content" data-tab-active="false" id="tab4"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 

     <div class="tab-content" data-tab-active="false" id="tab5"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 

     <div class="tab-content" data-tab-active="false" id="tab6"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nisi tenetur ea culpa reprehenderit quisquam eos omnis numquam ratione delectus quo veniam obcaecati provident magni ut vel corrupti consequatur laboriosam.</p> 
     </div> 
    </div> 
</div> 

CSS:

.tabs-container { 
    width: 100%; 
    position: relative; 
} 

.tabs-container .tabs-btn { 

} 

.tabs-container .tabs-btn ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    text-align: center; 
} 

.tabs-btn ul li { 
    display: inline-block; 
    width: 80px; 
    height: 80px; 
    background-color: #ddd; 
    border: 1px solid #eee; 
    position: relative; 
} 

.tabs-btn li.active:after { 
    content: ""; 
    display: block; 
    width: 0; 
    border-width: 7px 7px 0px; 
    border-style: solid; 
    border-color: #ddd transparent; 
    position: absolute; 
    bottom: -7px; 
    margin-left: 50%; 
    left: -5px; 
} 

.tabs-btn li a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    line-height: 80px; 
    text-decoration: none; 
} 
/* tab content */ 
.tabs-content-container { 
    width: 100%; 
    position: relative; 
} 

.tabs-content-container .tab-content { 
    max-width: 300px; 
    margin: 0 auto; 
} 

.tabs-content-container .tab-content[data-tab-active='true'] { 
    display: block; 
} 

.tabs-content-container .tab-content[data-tab-active='false'] { 
    display: none; 
} 

Answer 1

/* Get DOM elements */ 
var navElement  = $('.tabs-btn li a'); 
var contentElement = $('.tabs-content-container .tab-content'); 

/* Notify about a click event */ 
navElement.click(function(e) { 
    /* stop browser from following clicked link */ 
    e.preventDefault(); 

    /* get content div id */ 
    var href = $(this).attr('href'); 

    /* turn off all nav links and turn on the clicked one */ 
    navElement.parent().removeClass('active'); 
    $(this).parent().addClass('active'); 

    /* turn off all content and turn on the clicked on */ 
    contentElement.attr('data-tab-active', 'false'); 
    $(href).attr('data-tab-active', 'true'); 
}); 

Демо: http://jsfiddle.net/cout1ofr/5/

Вы можете использовать метод jQuery on, если вы собираетесь использовать ajax на своей веб-странице и динамически переключаться с содержимым.

Answer 2

Try что-то вроде этого

$('.tabs-btn a').on('click',function(e){ 
    e.preventDefault(); 
    var _this = $(this); 
    $('.tabs-btn li').removeClass('active'); 
    _this.parent().addClass('active'); 
    var _index = $('.tabs-btn a').index(_this); 
    $('.tab-content').attr('data-tab-active', 'false'); 
    $($('.tab-content').get(_index)).attr('data-tab-active', 'true'); 
}); 

Answer 3

Проверьте мое решение: demo

var tabsContents = $('.tab-content'); 
var tabsButtons = $('.tabs-btn li').click(function() { 
    var tabButton = $(this), 
     tabId = $(this).find('a').attr('href'); 

    tabsButtons.removeClass('active'); 
    tabButton.addClass('active'); 

    tabsContents.attr('data-tab-active', 'false') 
    tabsContents.filter(tabId).attr('data-tab-active', 'true'); 

}); 

Answer 4

Если вы ищете решение, которое не требует JQuery, посмотрите: http://jsfiddle.net/cout1ofr/6/

Некоторые настройки HTML для добавления атрибутов идентификаторов и данных и этого JavaScript:

// Display tab by id 
function displayTab(tabId) { 
    var tabsContainer = document.getElementById('my-tabs-content'); 
    var tabs = tabsContainer.childNodes; 
    var i = 0; 
    var len = tabs.length; 
    var tab = document.getElementById(tabId); 

    for (; i < len; i++) { 
     if (tabs[i].getAttribute && tabs[i].getAttribute('data-tab-active')) { 
      tabs[i].setAttribute('data-tab-active', 'false'); 
     } 
    } 
    tab.setAttribute('data-tab-active', 'true'); 
} 

// Change tab to element clicked. 
function setTab(e) { 
    var ul = this.parentNode.parentNode; 
    var lis = ul.childNodes; 
    var i = 0; 
    var len = lis.length; 
    for (; i < len; i++) { 
     lis[i].className = ''; 
    } 
    this.parentNode.className = 'active'; 

    displayTab(this.getAttribute('data-tab-id')); 
} 

// Set up event listeners. 
var tabs = document.getElementById('my-tabs'); 
var lis = tabs.childNodes; 
var i = 0; 
var len = lis.length; 
for (; i < len; i++) { 
    if (lis[i].firstChild) { 
     lis[i].firstChild.addEventListener('click', setTab); 
    } 
}