タブでコンテンツを切り替える

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

Code

$(function () {

  var wrapper = $('div.wrapper');
  var boxs = $('div.contents');
  var tabBtn = $('h1.title');

  $(wrapper).css({
    height: '224px'
  });
  $(boxs).css({
    position: 'absolute'
  });
  $(tabBtn).css({
    position: 'absolute',
    top: '-98px',
    cursor: 'pointer'
  });

  function zIndexReset(){
    $(boxs).css('z-index','1');
  }

  tabBtn.click(function(){
    var tabBtnVal = $(this).attr('id');
    var divId = tabBtnVal.replace('Title','');
    zIndexReset();
    $('#' + divId).css('z-index','2');
  });

});

JavaScript1000本ノック トップページへ