javascript - 单击带有类的链接时显示 div

Question

当使用. <div>_<li><li>

<ul class="nav1">
    <li class="nav2">
        <a href="http://rocketcss.com" class="nav2">Home</a>
    </li>
    <li class="nav2">
        <a href="http://rocketcss.com/settings" class="nav2">Settings</a>
    </li>
    <li class="nav2">
        <a href="http://rocketcss.com/download" class="nav2">Download</a>
    </li>
    <li class="nav2 signInActive">
        <a href="http://rocketcss.com/download" class="nav2">Sign In</a>
    </li>
</ul>

您能否告诉我是否需要添加：

<script src="http://code.jquery.com/jquery-latest.js"></script>

Answer 1

您可以使用 jQuery 来完成此操作，也可以使用transition属性直接使用 CSS 来完成；这完全取决于您和您的项目的需求。

jQuery 将为您提供更好的跨浏览器支持：

$(".nav1").on("click", ".signInActive", function () {
    $(".bar").fadeIn();
});

或者，您可以使用 CSS 来实现：

.foo {
    opacity: 0;
}

.foo.activated {
    transition: opacity 2s;
    opacity: 1;
}

只需切换类：

var element = document.querySelector(".signInActive");
var target  = document.querySelector(".myDIV");

element.addEventListener("click", function () {
    target.classList.toggle("activated");
}, false);

Answer 2

如果你打算使用 jQuery（在头脑中）

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function() {

      $("#signInHold").hide();
      $(".signInActive").click(function() {
          $("#signInHold").fadeToggle("slow"); <--This targets the div with ID signInHold
      });
});

</script>

Answer 3

是的，您需要添加 jquery 将类 signIn 添加到您的 li ，现在当您单击 div 并将类 signInActive 添加到您

<li class="nav2 signIn">
 <a href="http://rocketcss.com/download" class="nav2">Sign In</a>
</li>

$(document).ready(function(){
  $('.signIn').click(function(){
    $('#signInHold').fadeIn(300);
    $(this).addClass('signInActive');
  });
}); 

Answer 4

我想这就是你要找的：

$('.signInActive').click(function () { $('#signInHold').show(); });

当然，这假设您确实加载了 jQuery。