Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
jqueryでタブを作っているのですが、if文を使って書くとのことなのですが
そのif文に入れる条件がわかりません。
発生している問題・エラーメッセージ
if文の条件がわからない
該当のソースコード
HTML
<body> <div class="tabs-menu"> <div id="tab-menu-a ">タブa</div> <div id="tab-menu-b">タブb</div> <div id="tab-menu-c">タブc</div> </div> <div class="tabs-content"> <div id="tabs-a"> <p>タブaの内容が入ります。</p> </div> <div id="tabs-b"> <p>タブbの内容が入ります。</p> </div> <div id="tabs-c"> <p>タブcの内容が入ります。</p> </div> </div> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="main.js"></script> </body>CSS
@charset "UTF-8"
body{
margin: 0px;
padding: 0px;
}
header{
width: 1000px;
/* margin: 0 auto; /
background-color: #ffcccc;
}
#wrapper{
width: 1000px;
/ margin: 0 auto; /
display: flex;
}
#main{
width: 700px;
background-color: #ccffcc;
}
#menu{
width: 300px;
background-color: #ccccff;
}
footer{
background-color: #ffccff;
/ margin: 0 auto; */
width: 1000px;
}
js
$(function(){
const showTab = (selector) => {
console.log(selector);
$(".tabs-menu div").removeClass("active");
$(".tabs-content div").hide();
var tabs = $(".tabs-menu div[#='${selector}']")
console.log(tags)
.addClass("active");
if (selector === "tab-menu-a"){
$("tabs-a").show();
}
if () {
} }
});
試したこと
if文を理解するためにもう一度if文についての記事を読みなおしました。
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
jQueryの場合filterやfindで処理をすればifで分岐することは
あまりないかもしれません。
javascript
1<script> 2$(function(){ 3 $('.tabs-menu div').on('click',function(){ 4 $('.tabs-menu div').removeClass('active') 5 $(this).addClass('active') 6 var idx=$('.tabs-menu div').index(this); 7 $('.tabs-content div').hide().eq(idx).show(); 8 }).filter('.active').trigger('click'); 9}); 10</script> 11<style> 12.active{background-Color:red} 13</style> 14<div class="tabs-menu"> 15<div id="tab-menu-a" class="active">タブa</div> 16<div id="tab-menu-b">タブb</div> 17<div id="tab-menu-c">タブc</div> 18</div> 19<div class="tabs-content"> 20<div id="tabs-a"> 21<p>タブaの内容が入ります。</p> 22</div> 23<div id="tabs-b"> 24<p>タブbの内容が入ります。</p> 25</div> 26<div id="tabs-c"> 27<p>タブcの内容が入ります。</p> 28</div> 29</div>
投稿2020/08/11 03:26
総合スコア115010
あなたの回答
tips
プレビュー
