jQuery 如何定位"this"的目标?



当我尽力解释我需要什么时,请耐心等待:)

我们有3个链接指向页面下方的锚点,如下所示:

去往<div id="#step1"><a href="#step1">Step 1</a>

去往<div id="#step2"><a href="#step2">Step 2</a>

去往<div id="#step3"><a href="#step3">Step 3</a>

因此,我要做的是动态地定位我要定位的元素。因此,如果我点击step1链接,我会转到id为step1的div,但使用jQuery来选择目标元素(id为step1的div)。

所以这个片段不起作用,但我认为它走在了正确的道路上:

$(this).effect("highlight", {}, 3000);

它选择了我点击的链接-不对!我想在该链接中选择我要针对的元素。明白了吗?现在,我知道我可以对它进行硬编码,但必须有一种方法来动态地针对我想要的内容。

如果这没有任何意义,我很抱歉。我希望得到任何帮助和反馈。

谢谢!

$($(this).attr('href')).effect("highlight", {}, 3000);

http://jsfiddle.net/b9nub/

PS:请注意,在id值中不需要使用#,因此

<div id="step1">

以下是我用来闪现#anchor链接目标的代码。维基百科使用了类似于flash脚注的技术。

/**
 * Temporary highlight targets of #anchor links.
 */
$('a').click(function() {
  if (/#(.*)/.test($(this).attr('href'))) {
    var $target = $('#' + RegExp.$1 + ', *[name="' + RegExp.$1 + '"]');
    var repeats = 15;
    function step() {
      repeats--;
      $target[repeats ? 'toggleClass' : 'removeClass']('target');
      if (repeats) {
        window.setTimeout(step, 50);
      }
    }
    step();
  }
});

(您必须在样式表中添加一个"target"类来进行样式设置。)

顺便说一句,只是想让你知道:单独使用CSS3,使用其:target伪类,可以对目标元素进行样式化:

div:target {
  color: red;
}

在a标记的点击事件中,这指的是a元素。因此,我假设您希望从该标签中获得href,并使用您自己的逻辑来突出显示div。

$($(this).attr('href')).effect("highlight", {}, 3000);

最新更新