Question

我正在尝试创建标签系统，但我无法隐藏并显示标签。

我找不到让它工作的方法，这是我的代码。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你可以这样做，你将所有标签设置为display: none;，然后点击添加课程active，将其更改为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>

Answer 2

你可以这样做：

<强> jQuery的：

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

如何在这个项目中使用jquery制作一个标签系统？

2 个答案: