このプロジェクトでjqueryを使用してタブシステムを作成するにはどうすればいいですか？

Question

タブシステムを作成しようとしていますが、タブを非表示にして表示できません。

私はそれを動作させる方法を見つけることができません、これは私のコードです。

$(function() { 
 
    $(".aba:not(:first)").hide(); 
 
    $("a").click(function() { 
 
    var div = $(this).attr("href"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="left-side"> 
 
    <div class="services"> 
 
     <ul class="clearfix"> 
 
     <li><a class="blink" href="#a_nota">NOTA</a></li> 
 
     <li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li> 
 
     <li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li> 
 
     <li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li> 
 
     </ul> 
 
     <div class="contato"> 
 
     <div class="tell"> 
 
      <img src="icon/phoneicon.png" alt="teste"> 
 
      <p>Contato: 08000 023 1231</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="right-side"> 
 
    <div id="a_nota" class="aba">NOTA</div> 
 
    <div id="a_frequencia" class="aba">FREQUÊNCIA</div> 
 
    <div id="a_grade" class="aba">GRADE</div> 
 
    <div id="a_financeiro" class="aba">FINANCEIRO</div> 
 
    </div> 
 
</div>

Answer 1

あなたがdisplay: none;にすべてのタブを設定し、クリック時にdisplay:block !important;

$('a.blink').on('click', function(){ 
 
    var clicked = $(this).attr('href').replace("#", ""); 
 
    $('div.aba').each(function(){ 
 
    if($(this).attr('id') === clicked){ 
 
     $(this).addClass('active'); 
 
    }else{ 
 
     $(this).removeClass('active'); 
 
    } 
 
    }); 
 
});

.aba{ 
 
display:none; 
 
} 
 
.aba.active{ 
 
display:block !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="left-side"> 
 
    <div class="services"> 
 
     <ul class="clearfix"> 
 
     <li><a class="blink" href="#a_nota">NOTA</a></li> 
 
     <li><a class="blink" href="#a_frequencia">FREQUÊNCIA</a></li> 
 
     <li><a class="blink" href="#a_grade">GRADE CURRICULAR</a></li> 
 
     <li><a class="blink" href="#a_financeiro">FINANCEIRO</a></li> 
 
     </ul> 
 
     <div class="contato"> 
 
     <div class="tell"> 
 
      <img src="icon/phoneicon.png" alt="teste"> 
 
      <p>Contato: 08000 023 1231</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="right-side"> 
 
    <div id="a_nota" class="aba active">NOTA</div> 
 
    <div id="a_frequencia" class="aba">FREQUÊNCIA</div> 
 
    <div id="a_grade" class="aba">GRADE</div> 
 
    <div id="a_financeiro" class="aba">FINANCEIRO</div> 
 
    </div> 
 
</div>

に変更し、クラス activeを追加する場所あなたは、次のように行うことができます

Answer 2

You cそれはこのように動作します

のjQuery：

$(".aba").not(":first-child").hide(); 
$(".blink").on("click", function(e) { 
    e.preventDefault(); 
    var value = $(this).attr("href"); 
    $(".aba").hide(); 
    $(value).fadeIn(500); 
});