Question

编辑：我通过'前端购买'将js更新为下面列出的示例，现在我的链接不起作用。我编辑了我的原始帖子，以显示我现在正在使用的内容。知道为什么链接不再有效吗？

我试图让我的主要内容在没有页眉和页脚消失的情况下淡出。下面是我的代码。下面是我设置的代码。我在标题中有一个外部调用jquery库。感谢

<script>
$(document).ready(function() { 
  var linkLocation = null;
  $("#content").hide().fadeIn(2000);
  $("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#content").fadeOut(1000, function() {
      redirectPage();
    });      
  });
  function redirectPage() {
    window.location = linkLocation;
  }
});
</script>


<body>
<div id="content_wrapper">

    <div id="header">

        <div id="logo"></div>           

        <div id="nav">
            <ul id="nav" class="nav">
                <li id="home"><a href="index.html" title="" class="transition">Home</a></li>            
                <li id="about"><a href="about.html" title="About Us" class="transition">About Us</a></li>
                <li id="contact"><a href="contact.html" title="Contact Us" class="transition">Contact Us</a></li>                   
            </ul>
        </div> 

    <!--End Main Nav-->           

    </div> 
    <!-- End of Content Header -->
    <div id="content">  
    some text etc...
    </div>
    <div id="footer"></div>
</div>
</body>

Answer 1

content是元素的 ID ，因此您必须为选择器添加#前缀，如下所示：

$('#content').hide().fadeIn(2000);

Answer 2

你的JS缺少一些关键的东西。首先，请确保将#添加到ID的前面。其次，您希望为链接位置创建variable，以便它知道第二个函数中的内容。像这样：

$(document).ready(function() {
  var linkLocation = null;  // Create a variable for the link location.
  $("#content").hide().fadeIn(2000);
  $("a.transition").click(function(event){
    event.preventDefault(); // prevent the default action from happening.
    linkLocation = this.href;
    $("#content").fadeOut(1000, function() { // on complete, redirect the page.
      redirectPage();
    });      
  });
  function redirectPage() {
    window.location = linkLocation;
  }
});

CodePen正在行动中。

Div褪色但不是页眉和页脚

2 个答案: