前提・実現したいこと
簡単なタブ切り替えの実装で躓いております。
Codepenでやってみたところ、うまく動かずにお手上げ状態です。
https://codepen.io/yuihana/pen/gJVMNZ
参考URLは、https://boel.jp/tips/vol86_tabselect.htmlのサイトで行いました。
何が間違って不具合が起きているのか、教えていただけないでしょうか。
お手数おかけいたしますが、何卒よろしくお願い致します。
発生している問題・エラーメッセージ
jQueryが動かない
該当のソースコード
<div class="tab_wrap"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="tab_panel"> <p>panel1</p> </div> <div id="panel2" class="tab_panel"> <p>panel2</p> </div> <div id="panel3" class="tab_panel"> <p>panel3</p> </div> </div> </div> .tab_wrap{width:470px; margin:80px auto;} .tab_area{font-size:0; margin-right:30px; text-align:right;} .tab_area label{width:90px; margin-right:10px; display:inline-block; padding:14px 0 12px; color:#fff; background:#90C9CF; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s; border:4px solid #90C9CF; border-bottom:none; border-radius:30% 5% 2% 5%/ 14% 40% 25% 25%; transform:translateY(8px); position:relative;} .tab_area label:last-of-type{margin-right:0;} .tab_area label:hover{background:#afd6d8;} .panel_area{width:100%; background:#fff; padding:80px 0; border:4px solid #90C9CF; border-radius:2% 12% 2% 12%/ 22% 8% 22% 8%; position:relative; z-index:0;} .tab_panel{opacity:0; display:none;} .tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;} $(".tab_label").on("click",function(){ var $th = $(this).index(); $(".tab_label").removeClass("active"); $(".tab_panel").removeClass("active"); $(this).addClass("active"); $(".tab_panel").eq($th).addClass("active"); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/08 03:00