1

编辑：我将 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>
4

2 回答 2

0

您的 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为它付诸行动。

于 2013-08-11T19:40:46.770 回答
0

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

$('#content').hide().fadeIn(2000);
于 2013-08-11T19:24:48.460 回答