webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

tab panel 手順2

<script>
$(function(){
$('#panel li').hide();
$($('#tab>li a.selected').attr('href')).show();
});
</script>

  • $('#panel li').hide();            
  • パネルの li をすべて隠す   
  • $($('#tab>li a.selected').attr('href')).show();
  • ul(#tab) 子供の li の.selectedの<a>のhref属性=つまり「#tab1」をshowする。

<script>
$(function(){
$('#panel li').hide();
$($('#tab>li a.selected').attr('href')).show();
$('#tab li a').on('click', function(){
$('#tab li a').removeClass('selected');  クオーテーションの不備
$(this).addClass('selected');
$('#panel li').hide();
$($(this).attr('href')).show();
console.log($(this).attr('href'));
return false;
});
});
</script>  

f:id:ohta-felica:20160525014106p:plain