html
1<head> 2 <meta charset="utf-8"> 3<title> 4</title> 5 <!-- jQuery 3 --> 6 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 7</head> 8<boby> 9<div class="tab_wrap"> 10 <input id="tab1" type="radio" name="tab_btn"> 11 <input id="tab2" type="radio" name="tab_btn" checked> 12 <input id="tab3" type="radio" name="tab_btn"> 13 14 <div class="tab_area"> 15 <label class="tab_label" for="tab1">tab1</label> 16 <label class="tab_label active" for="tab2">tab2</label> 17 <label class="tab_label" for="tab3">tab3</label> 18 </div> 19 <div class="panel_area"> 20 <div id="panel1" class="tab_panel"> 21 <p><a href="/admin/proposal/show/1">panel1</a></p> 22 </div> 23 <div id="panel2" class="tab_panel active"> 24 <p><a href="/admin/proposal/show/1">panel2</a></p> 25 </div> 26 <div id="panel3" class="tab_panel"> 27 <p><a href="/admin/proposal/show/1">panel3</a></p> 28 </div> 29 </div> 30</div> 31<div> 32<input type="checkbox" name="check" value="prop" id="prop">prop</p> 33</div> 34<script> 35$(".tab_label").on("click",function(){ 36 var $th = $(this).index(); 37 38 console.log("th" + $th); 39 $(".tab_label").removeClass("active"); 40 $(".tab_panel").removeClass("active"); 41 $(this).addClass("active"); 42 $(".tab_panel").eq($th).addClass("active"); 43}); 44</script> 45<script> 46$(function() { 47 48 // チェックボックスをチェックしたら発動 49 $('input[name="check"]').change(function() { 50 var prop = $('#prop').prop('checked'); 51 if (prop) { 52 var $th = $(".tab_label").index(); 53 $(".tab_panel").each(function(i, o){ 54 55 //取り出せない 56 var className = $(".tab_panel").attr("class"); 57 var class_Array = className.split(" "); 58 alert("class_Array[0]" + class_Array[0]); 59 alert("class_Array[1]" + class_Array[1]); 60 }); 61 } 62 63 }); 64}); 65</script> 66</body> 67</html>
この場合、
$(".tab_label").on("click",function(){
のタイミングでは、
tab_panel class='tab_panel active'のindexを知ることは出来ますが、
例えば、チェックボックスのチェックタイミングなど
の場合、tab_panel class='tab_panel active'のindex は、どうしたら取得できるのでしょうか?
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー