Question

我正在创建一个单页HTML页面，其中包含锚点作为菜单项。我找到了有助于简化整个页面中锚点过渡的代码。以下是平滑过渡的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
            $(function() {
              $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                  if (target.length) {
                    $('html,body').animate({
                      scrollTop: target.offset().top
                    }, 1500);
                    return false;
                  }
                }
              });
            });

        </script>

` 在我的单页HTML页面的一部分，我想使用选项卡jquery代码来显示信息。我的问题是，由于转换jquery代码（上面），似乎是标签jquery（下面的代码）的问题。有时，点击标签后，上述功能不起作用。我的ChrisPederick工具栏未显示任何JavaScript错误。我真的很感激如何解决这个问题。

以下是我的标签javascript的代码。目前，我的单页HTML页面中的标签javascript位于我的标签div之前，这意味着javascript代码位于<body>标记中：

<script>
    $(function() {
        $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Alcohol &amp; College Life</a></li>
        <li><a href="#tabs-2">Financial Fitness</a></li>
    </ul>
    <div id="tabs-1">
        <p>Sample topics:
        <ul>
            <li>Alcohol, tobacco, marijuana and other drugs</li>
            <li>Harm reduction and party skills</li>
        </ul>
        </p>
    </div>
    <div id="tabs-2">
        <p>Sample topics:
        <ul>
            <li>Topic 1</li>
            <li>Topic 2</li>
        </ul>
        </p>
    </div>
</div>

Answer 1

实际上，不应将平滑滚动jQuery代码应用于选项卡。所以用这种方式更改平滑滚动jQuery代码：

$(function() {
  $('a[href*=#]:not([href=#]):not(#tabs ul li a)').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1500);
        return false;
      }
    }
  });
});

一页HTML页面上的两组Jquery cody

1 个答案: