在选项卡-Liferay中单击带有href的标记时，禁止滚动

Prevent scroll when click on a tag with href in tab- Liferay

本文关键字：滚动 禁止 href 选项 -Liferay 单击      更新时间：2023-09-26

我在Liferay中创建了一些小程序。在portlet中，我使用选项卡

<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。它仍在滚动。如何防止它。

使用AUI选项卡。转到AUI选项卡查看详细信息。

<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>

它对我有效。

相关文章：