Question

我有这个js脚本，当用户输入时会使页面淡入，当用户点击指向另一个页面的链接时淡出。它工作，但不知何故，我在页面中有我的锚链接，每当我点击链接，它会带我到锚点，并在几秒钟内将我重定向到像localhost/website/null这样的空页面

这是代码：

jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
   jQuery('body').fadeIn();
   jQuery('a').on('click', function(event) {
      var thetarget = this.getAttribute('target')
      if (thetarget !="_blank" ) {
         var thehref = this.getAttribute('href')
         event.preventDefault();
         jQuery('body').fadeOut(function(){
            window.location = thehref
         });
      }
    });
});
setTimeout(function() {
    jQuery('body').fadeIn();
}, 1000)

Answer 1

我不理解这个问题 - 也许没有问题？请参阅下面的代码段？

Meta / Sidenote：SO需要一种更好的方式来创建评论片段 - 这不应该是一个答案，但是没有更好的方法来提供SO生成的演示。

＆＃13;

jQuery('.container').css('display', 'none');

jQuery(document).ready(function($) {
  var $container = $('container').fadeIn();


  $('a').on('click', function(e) {
    var _target = this.getAttribute('target');

    if (_target != "_blank") { // (e.g., null, '_self')
      var _href = this.getAttribute('href');
      e.preventDefault();

      $('.container').fadeOut(function() {
        window.location = _href;
      });
    }
  });
});

setTimeout(function() {
  jQuery('.container').fadeIn();
}, 1000)

＆＃13;

.container {
  background: #09c;
  padding: 1em;
  height: 100%;
  width: 100vw;
}

a:nth-child(2n)::after {
  content: "\A";
  white-space: pre;
}

body {
  margin: 0;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>

  <div class="container">
    <a href="//www.google.com" target="_self">_self (external link)</a>
    <a href="#foo" target="_self">_self (internal link)</a>
    <a href="//www.google.com" target="_blank">_blank (external link)</a>
    <a href="#foo" target="_blank">_blank (internal link)</a>
    <a href="//www.google.com">No target (external link)</a>
    <a href="#foo">No target (internal link)</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, reprehenderit, nostrum. Tempora totam, iusto, inventore cupiditate hic quam quas explicabo dolore mollitia eius ullam rerum minus placeat nobis in debitis magni non, dolor aut libero
      dignissimos fugiat. Sed laboriosam itaque necessitatibus hic excepturi, perferendis, exercitationem cumque incidunt asperiores labore dolor.</p>
    <p>Minus velit rerum, reiciendis perspiciatis pariatur accusamus, magni voluptatibus, voluptatem fugit optio libero quidem! Nostrum pariatur eveniet ipsum obcaecati aperiam deleniti hic quam facilis reprehenderit dolor ipsam suscipit, quidem laboriosam
      impedit fugiat sit dignissimos delectus qui. Suscipit necessitatibus natus omnis eveniet molestiae nostrum aut culpa, tempora, voluptatibus modi eius nisi.</p>
    <p>Illo quo, iure doloremque unde ullam iste. Fuga ullam dicta voluptate, odio sint molestiae expedita sequi, placeat omnis porro. Blanditiis ut, laboriosam nobis necessitatibus esse ipsam, magnam facilis in placeat delectus quidem eos laborum, illum
      similique fugiat nesciunt doloremque ratione unde vel fugit excepturi dolor minima, amet tenetur. Tempora, eveniet.</p>
    <p>Aliquam ex assumenda eum perspiciatis odio suscipit nemo in delectus. Iste in, ipsam iure deserunt, explicabo ipsum maxime. Praesentium, vitae, quos quia sed doloribus laboriosam. Architecto sapiente totam quisquam esse saepe asperiores provident
      voluptatibus aperiam, similique sunt fugit cupiditate beatae aspernatur laborum, eius quas ab tempore consequatur officiis vero! Fugiat.</p>
    <p>Explicabo minima necessitatibus soluta odio, sunt saepe aspernatur quasi molestiae cum? Nulla eveniet ad accusantium sed sapiente quod ea soluta repellendus culpa, ut deleniti dolore. Porro amet, quasi dignissimos provident modi nihil rerum quis explicabo,
      voluptatem illo assumenda itaque. Maxime sequi asperiores enim tempora maiores dolor. Nihil quidem repudiandae asperiores!</p>
    <p>Dicta facere at dolorum ut veritatis recusandae praesentium nesciunt illo, omnis doloremque labore repellendus soluta officia distinctio aperiam pariatur minus quia placeat enim, amet, quae repellat reiciendis nihil magni. Ad expedita dolores cupiditate
      debitis dolore? Unde vitae inventore provident reiciendis adipisci dolorum ad ipsa possimus excepturi, mollitia nobis. Perspiciatis, voluptate.</p>
    <p>Officia minima nulla delectus neque sapiente in voluptates iste facere dolorum sequi, animi fuga illo enim alias explicabo, culpa? Quaerat nesciunt animi, eius assumenda quidem sunt saepe nam suscipit voluptate eaque, laborum minus expedita nostrum
      praesentium iusto eveniet officia ab tempore eos at. Dolores minus qui fugit, temporibus sequi tempora!</p>
    <a id="foo" name="foo">ID:foo</a>
  </div>

</body>

＆＃13;

JS一直将我重定向到空页面

1 个答案: