jQueryはデータ付きのZ-インデックスを変更します*

Question

divsはすべて同じスペースを占有していますが、別のタブがクリックされたときにdivの上にdivが1つあるjQueryを設定します。これは、タブを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

DEMO

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

これは、データ属性を使用して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

トグル表示で行く：ブロック/なし

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

madalinのivascuの答えは私によると、非常に右です。

トピックをビットオフにすることはできますが、タブには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

例バニラJSを使用してタブを示す、何のjQueryが必要とされません。 この例では、z-indexではなく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>