Q&A
タブをjqueryで作成したいのですができません。
コンソールでは: ';' がありません。と表示されるのですが見当たりません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=11"> 6<link rel="stylesheet" href="./css/main.css"> 7<script src="./js/vendor/jquery-1.10.2.min.js"></script> 8<script src="./js/main.js"></script> 9</head> 10<body> 11<section id="pickup"> 12<ul class="tabu"> 13<li class="current"><a href="#ninnki">aaaaa</a></li> 14<li><a href="#osusume">bbbbb</a></li> 15</ul> 16<div class="tabContents current" id="ninnki"> 17<p>aaaaa</p> 18<p>bbbbb</p> 19<p>ccccc</p> 20</div> 21 22<div class="tabContents" id="osusume"> 23<p>ddddd</p> 24<p>eeeee</p> 25<p>fffff</p> 26</div> 27</section> 28</body> 29</html>
css
1tabu{ 2margin:10px 0 0 0; 3padding:0 0 0 0; 4} 5.tabu li{ 6float:left; 7width:49%; 8text-align:center; 9background-color:#000000; 10list-style-type:none; 11margin:0 0.5% 0 0; 12} 13.tabu li.current{ 14background-color:#ffffff; 15display:block; 16} 17#ninnki{ 18background-color:#ffffff; 19padding:0 0 0 0; 20margin:0 0 0 0; 21clear:both; 22} 23#ninnki p{ 24padding-top:2px; 25} 26#osusume{ 27display:none; 28} 29 30 31
jquery
1$(function(){ 2 $('#pickup').find('.tabu a')click(function(){ 3 $(this).parent().addClass('current').siblings('current').removeClass('current'); 4var tabTarget = $(this).attr('href'): 5$(tabTarget).addClass('current').siblings('current').removeClass('current'); 6 return false; 7}); 8
回答2件
0
ベストアンサー
エラーの行数までわかっているのですから
さすがにtypoは自分で取れるようにならないと・・・
$('#pickup').find('.tabu a')click(function(){
↓↓↓
$('#pickup').find('.tabu a').click(function(){
var tabTarget = $(this).attr('href'):
↓↓↓
var tabTarget = $(this).attr('href');
最後の閉じる「});」も抜けてます
sample
javascript
1<style> 2.tabu li{ 3float:left; 4width:49%; 5text-align:center; 6background-color:#000000; 7list-style-type:none; 8display:block; 9} 10.tabu li.current{ 11background-color:#ffffff; 12} 13#ninnki,#osusume{ 14display:none; 15} 16#ninnki.current,#osusume.current{ 17display:block; 18background-color:#ffffff; 19padding:0px; 20margin:0px; 21clear:both; 22} 23</style> 24<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 25<script> 26$(function(){ 27 $('#pickup .tabu a').on('click',function(e){ 28 $(this).closest('.tabu').find('li').removeClass('current'); 29 $(this).closest('li').addClass('current'); 30 var tabTarget = $(this).attr('href'); 31 $(this).closest('.tabu').find('~ div').removeClass('current'); 32 $(tabTarget).addClass('current'); 33 e.preventDefault(); 34 }); 35}); 36</script> 37<section id="pickup"> 38<ul class="tabu"> 39<li class="current"><a href="#ninnki">aaaaa</a></li> 40<li><a href="#osusume">bbbbb</a></li> 41</ul> 42<div class="tabContents current" id="ninnki"> 43<p>aaaaa</p> 44<p>bbbbb</p> 45<p>ccccc</p> 46</div> 47<div class="tabContents" id="osusume"> 48<p>ddddd</p> 49<p>eeeee</p> 50<p>fffff</p> 51</div> 52</section> 53
投稿2017/04/27 13:31
総合スコア114769
0
JavaScript
1// var tabTarget = $(this).attr('href'): 2// ↓ 3 var tabTarget = $(this).attr('href');
投稿2017/04/27 13:19
総合スコア69398
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。