Question

我想要显示/淡化<div>，ID为＆＃34; signInHold＆＃34;当<li>＆＃34;登录＆＃34;使用<li>上的signInActive类点击。

<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

我认为这就是你要找的东西：

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

这假设您当然加载了jQuery。

Answer 4

是的，你需要添加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');
  });
});

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

4 个答案: