Question

我有所有占用相同空间的div，我想设置jQuery，当点击不同的标签时，有一个div在另一个上面。我假设必须通过使用将选项卡连接到div的data- *属性更改z-index属性来完成此操作。

    /*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>

Answer 1

<强>样本

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

这是使用data属性更改z-index属性的方法。

<强> 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 UI的标签功能。可能会有所帮助。

https://jqueryui.com/tabs/

Answer 2

最好切换显示：block / none

$('.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

Answer 3

根据我的说法，马达林伊瓦斯库的答案是对的。

可能有点偏离主题，但您可以使用Jquery UI作为选项卡。易于实施和使用。在这种情况下，您无需担心管理z-index。但它可能不适合你的情况。

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

Answer 4

使用vanilla js显示标签的示例，不需要jQuery。此示例仅使用display而不是z-index。

＆＃13;

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

＆＃13;

#websites,
#sitemaps,
#pages {
  position: absolute;
  top: 150px;
  width: 100px;
  height: 100px;
}

#websites {
  background-color: red;
}

#sitemaps {
  background-color: blue;
}

#pages {
  background-color: green;
}

＆＃13;

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

＆＃13;

jQuery使用data- *更改z-index

4 个答案: