Q&A
【jQueryについて質問です！】
下記のコードを書いてみましたが、ブラウザで確認したところ、うまく表示されません！
どこがおかしいか、教えていただけると幸いです！
よろしくお願いいたします！
lang
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8 9 10<script> 11$(function() { 12 $('.tab li').click(function() { 13 var index = $('.tab li').index(this); 14 $('.content li').css('display','none';); 15 $('.content li').eq(index).css('display','block'); 16 $('.tab li').removeClass('select'); 17 $(this).addClass('select') 18 }); 19}); 20</script> 21 22</head> 23<body> 24<ul class="tab"> 25 26 <li class="select">タブ1</li> 27 28 <li>タブ2</li> 29 <li>タブ3</li> 30 <li>タブ4</li> 31</ul> 32<ul class="content"> 33 <li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</li> 34 <li class="hide">なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</li> 35 <li class="hide">新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</li> 36 <li class="hide">弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</li> 37</ul> 38 39 40</body> 41</html>
lang
1.tab{overflow:hidden;} 2.tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;} 3.tab li.select{background:#eee;} 4.content li{background:#eee; padding:20px;} 5.hide {display:none;}
回答1件
0
ベストアンサー
こんにちは。
HTMLのヘッダに記述されているドキュメントレディハンドラ：
lang
1<script> 2$(function() { 3 $('.tab li').click(function() { 4 var index = $('.tab li').index(this); 5 $('.content li').css('display','none';); 6 $('.content li').eq(index).css('display','block'); 7 $('.tab li').removeClass('select'); 8 $(this).addClass('select') 9 }); 10}); 11</script>
の中の、以下の行
lang
1 $('.content li').css('display','none';);
の 'none' の後のセミコロン（;）を削除してみたらタブ切り替えが
うまく動きました。一度、お試し頂けますでしょうか。
投稿2015/05/05 10:07
編集2015/05/05 10:18
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/05 11:57