jqueryでのタブの実装について、上の部分は色が変わるようにできたのですが、下の内容部分が変わりません。
どうしてでしょうか。
コンソールには何も表示されません。
jquery
1$(function(){ 2$('#pickup').find('a').click(function(){ 3$(this).parent().addClass('current').siblings('.current').removeClass('current'); 4var tabTarget = $(this).attr('href'); 5$(tabContents).addClass('current').siblings('.current').removeClass('current'); 6 return false; 7}); 8});
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> 30
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/28 12:02