如何在此項目中使用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

您c一個讓它以這種方式工作：

的jQuery：

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