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

Question

I am wanting to show/fadein a <div> with an ID of "signInHold" when the <li> "Sign In" is clicked using the class signInActive on the <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>

Could you please also tell me if I need to add:

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

Answer 1

You can do this with jQuery, or you can do it with straight CSS using the transition property; it's entirely up to you and the needs of your project.

jQuery will give you far better cross-browser support:

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

Or, you could do it with CSS:

.foo {
    opacity: 0;
}

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

And simply toggle the class:

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

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

Answer 2

If you're going to use jQuery (in the head)

<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

I think this is what you're looking for:

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

This assumes you do load jQuery, of course.

Answer 4

Yes you need to add jquery Add the class signIn to your li and now when you click the div will appear and the class signInActive added to you

<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');
  });
});