0

我的网站上有这个脚本：

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }

  $('[href*=#]').each(function() {
    if ( (filterPath(location.pathname) == filterPath(this.pathname))
      && (location.hostname == this.hostname)
      && (this.hash.replace(/#/,'')) ) {

      var $targetId = $(this.hash), 
        $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length 
        ? $targetId 
        : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {

        var divOffset = $target.parent().offset().top;
        var pOffset = $target.offset().top;
        var pScroll = pOffset - divOffset;

        $(this).click(function() {
          $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
          return false;
        });
      }
    }
  }); 
});

div它运行良好，可以上下滚动主导航等，但我希望div服务部分内的 s 左右滚动。我还想在投资组合部分添加一个滑块，但上面的代码规则任何附加代码，因为它应用于所有<a href...>标签。我如何只将它指定给 mainnav ul？

提前致谢

4

3 回答 3

1

将选择器从“[href*=#]”更改为“ul.mainnav [href*=#]”。

在使用 jQuery 时，如何编写只为您提供所需元素的选择器可能是最重要的事情。我只能推荐阅读关于选择器的精美 jQuery 文档（但也推荐其他内容）。

于 2009-06-21T17:22:33.793 回答
0

假设您具有以下结构，并且您只想将函数应用于“foo”链接。并保持所有其他不变。

<div id="mainnav">
  <ul>
    <li>
      <a href="#">foo</a>
    </li>
    <li>
      <a href="http://www.example.com">foo2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">foo3</a>
    </li>
  </ul>
  <a href="#">foobar</a>
</div>

然后你可以使用这样的 jQuery 选择

$("#mainnav > ul:first").find("a[href*=#]").css('color','red');

碎成碎片

$("#mainnav > ul:first")
//give me the element with id mainnav and then the first ul child element of it

.find("a[href*=#]")
//find all link elements in this ul which have href set to #

.css('color','red');
//and set their color to red
于 2009-06-21T17:22:03.700 回答
0

我不确定我是否完全理解您的问题，但如果您正在寻找一种仅在某个元素中查找链接的方法，您可以扩展您的选择器：

// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);

但是，如果您问我，这主要是一个临时解决方案。迟早您可能希望将效果应用到其他元素。class您可以为想要效果的元素添加一个属性：

<a href="#" class="scroll-effect">...</a>

然后像这样选择它们：

$('.scroll-effect').each(...);
于 2009-06-21T17:24:06.240 回答