-3

每次我尝试将以下代码添加到我的网站时，<a href>页面上的每个链接都会打开。如何在不打开每个<a href>链接的情况下使此代码正常工作，而不是使用单击功能，我可以使用按钮及其 id 代替吗？

<!DOCTYPE html>
<html>
<head>
  <style>
      p.one { position:relative; width:400px; height:90px; }
      div.two { position:absolute; width:400px; height:65px; 
        font-size:36px; text-align:center; 
        color:yellow; background:red;
        padding-top:25px; 
        top:0; left:0; display:none; }
        span.three { display:none; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="one">
        Let it be known that the party of the first part
        and the party of the second part are henceforth
        and hereto directed to assess the allegations
        for factual correctness... (<a href="#">click!</a>)
        <div class="two"><span class="three">Click here to continue...</span></div>

      </p>
<script>
        $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

      </script>

</body>
</html>
4

3 回答 3

3

您可以使用this引用单击元素的关键字。

$(function() {
   $(".one a").click(function(event) {
      $(this).next('div').fadeIn(3000, function(){
         $('span', this).fadeIn();
      })
      event.preventDefault();
   }); 
})

请注意，您的标记是无效的，在 P 标签中使用 DIV 标签会使您的文档无效且不语义，大多数浏览器将 DIV 元素放在 P 标签之外，您当前的代码仅因为您选择了所有 DIV 元素而起作用，如果您根据当前标记（如我所做的）遍历 DOM，您将得到意想不到的结果。

<div class="one">
    <p>
       Let it be known that the party of the first part
       and the party of the second part are henceforth
       and hereto directed to assess the allegations
       for factual correctness...
    </p>
    <a href="#">click!</a>
    <div class="two"><span class="three">Click here to continue...</span></div>
</div>

还要注意，当一个父元素被隐藏时，它的所有子元素也都被隐藏了，所以不需要隐藏子元素并一一显示。隐藏和显示父元素就足够了。

http://jsfiddle.net/BhJJa/

于 2012-11-15T12:09:37.610 回答
1

您需要通过 jquery使用id 选择器。

$("#YourButtonId").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
});
于 2012-11-15T12:07:58.397 回答
1

这是因为您将单击事件绑定到<a>HTML 文档中的每一个。你需要给你 button/a 一个 id 来用 jQuery 选择它

jQuery

$("#btnID").click(function() {
 $("div").fadeIn(3000, function () {
  $("span").fadeIn(100);
 });
 return false;
});

HTML

<a href="javascript:void(0);" id="btnID">click!</a>

您也可以将其与<button>标签一起使用。

于 2012-11-15T12:11:31.477 回答