Блог

У меня есть разделы, которые все занимают одинаковое пространство, и я хочу настроить jQuery, в котором один раздел находится поверх другого при нажатии на разные вкладки. Я предполагаю, что это должно быть сделано путем изменения атрибута z-index с использованием атрибута data-*, который соединяет вкладку с div.

     /*The tabs to be clicked*/

    <ul class="tabs">
    <li class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
    <li class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
    <li class="tab" data-tabcontainer-id="pages">Pages</li>
    </ul>

    /*The divs that need to come on top of each other*/

    <div id="websites" class="tabcontainer">Websites</div>
    <div id="sitemaps" class="tabcontainer">Sitemaps</div>
    <div id="pages" class="tabcontainer">Pages</div>
  

ДЕМОНСТРАЦИЯ

http://plnkr.co/edit/aNomjINfbYYrRUhMj63A?p=preview

Вот как вы можете изменить z-index свойство, используя атрибут data.

JS:

 jQuery(document).ready(function(){
  $('.tab').click(function(){
    var target = $(this).data('tabcontainer-id');
    $('.tabcontainer').css('z-index', '0'); //resets z-index to 0 for all other
    $('.tabcontainer#' target).css('z-index', '1'); //sets z-index for current target to 1
  })  
});
  

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

https://jqueryui.com/tabs/

ответ мадалин иваску, по моему мнению, совершенно правильный.

Возможно, это немного не по теме, но вы можете использовать Jquery UI для вкладок. Легко внедряется и с ним работать. В этом случае вам не нужно беспокоиться об управлении z-индексом. Но это может не подходить для вашего случая.

 <div id="tabs">
     <ul >
        <li><a href="#websites" style="background-color:#1aa3ff;">Websites</a></li>
        <li><a href="#sitemaps">Sitemaps</a></li>
        <li><a href="#pages">Pages</a></li>
    </ul>
    <div id="websites" class="tabcontainer">Websites</div>
    <div id="sitemaps" class="tabcontainer">Sitemaps</div>
    <div id="pages" class="tabcontainer">Pages</div>
</div>
  

Скрипка:https://jsfiddle.net/uxwyj4d4 /

лучше переключить отображение: блокировать / нет

 $('.tabcontainer').not('.tabcontainer:first').hide();
$('.tab').click(function(){
      //toggle active class on tabs
      $('.tab').removeClass('active');
      $(this).addClass('active');
      //show corresponding tab container
      var id = '#' $(this).attr('data-tabcontainer-id');
      $('.tabcontainer').hide();//here you can go with another class like above that will toggle between block and none
      $(id).show();
});
  

демо:http://plnkr.co/edit/gPIwv80vUIUTQ46Bderj?p=preview

Пример для отображения вкладок с использованием ванильного js, jQuery не требуется. В этом примере вместо z-индекса используется только display.

 // get tabs
var targets = {
websites: document.getElementById('websites'),
sitemaps: document.getElementById('sitemaps'),
pages: document.getElementById('pages')
  },
  show = function(target) {
hideAll();
targets[target.dataset.tabcontainerId].style.display = '';
  },
  hideAll = function() {
  // hide all tabs
Object.keys(targets).forEach(function(key) {
  targets[key].style.display = 'none';
});
  };
// when click on link show tab
document.getElementById('w').addEventListener('click', function(event) {
  show(event.target);
});
document.getElementById('s').addEventListener('click', function(event) {
  show(event.target);
});
document.getElementById('p').addEventListener('click', function(event) {
  show(event.target);
});  

 #websites,
#sitemaps,
#pages {
  position: absolute;
  top: 150px;
  width: 100px;
  height: 100px;
}

#websites {
  background-color: red;
}

#sitemaps {
  background-color: blue;
}

#pages {
  background-color: green;
}  

 <ul class="tabs">
  <li id="w" class="tab" data-tabcontainer-id="websites" style="background-color:#1aa3ff;">Websites</li>
  <li id="s" class="tab" data-tabcontainer-id="sitemaps">Sitemaps</li>
  <li id="p" class="tab" data-tabcontainer-id="pages">Pages</li>
</ul>



<div id="websites" class="tabcontainer">Websites</div>
<div id="sitemaps" class="tabcontainer">Sitemaps</div>
<div id="pages" class="tabcontainer">Pages</div>