javascript - 单击选项卡中带有 href 的标签时防止滚动 - Liferay

Question

我在 Liferay 中创建了一些 portlet。在 portlet 中我使用 tab

<ul class='etabs'>
    <li class='tab'><a id="scrolltest" href="#aging">ABC</a></li>
    <li class='tab'><a href="#exception">EDV</a></li>
    <li class='tab'><a href="#adjust">SDF</a></li>
</ul>

效果很好。但我的问题是，当我单击选项卡菜单时，Chrome 会自动滚动，因此选项卡菜单被隐藏。 然后我使用这段代码。

$('#scrolltest').click(function(e) {
    e.preventDefault();
    return false;

});

但是我的代码不适用于 chrome。它仍然滚动。 我怎样才能防止它。

Answer 1

使用 AUI 选项卡。转到AUI TabView了解详情。

<div id="myTab">

  <ul class="nav nav-tabs">
    <li><a href="#tab-1">Tab #1</a></li>
    <li class="active"><a href="#tab-2">Tab #2</a></li>
    <li><a href="#tab-3">Tab #3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab-1" class="tab-pane">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dicta aspernatur beatae fuga neque cupiditate laudantium itaque pariatur deleniti tenetur modi voluptatem animi sunt eligendi nisi corporis expedita quaerat facilis.</p>
    </div>
    <div id="tab-2">
      <p>Doloremque beatae rem voluptate nulla perspiciatis atque laudantium nihil impedit molestiae fuga veritatis quibusdam nam maiores aliquid. Deserunt dolorum quas temporibus enim ex nihil nemo perspiciatis. Nisi deserunt rem id pariatur in nostrum?</p>
    </div>
    <div id="tab-3" class="tab-pane">
      <p>Aliquid ipsum asperiores alias temporibus autem impedit soluta ut id iure explicabo veritatis consectetur debitis eaque recusandae odit quas nobis maxime saepe. Incidunt amet obcaecati. Ducimus soluta unde repellat laboriosam fuga modi rem itaque!</p>
    </div>
  </div>

</div>

<script>
AUI().use(
  'aui-tabview',
  function(A) {
    new A.TabView(
      {
        srcNode: '#myTab'
      }
    ).render();
  }
);
</script>

这对我有用。