阻止选项卡上的页面跳转单击JS

时间:2015-10-15 09:01:08

标签: javascript jquery css

我有几个不同高度的标签。单击选项卡链接时,如何防止页面跳到容器顶部?

的jsfiddle

http://jsfiddle.net/q1tdsar1/1/ 重现问题的步骤:单击选项卡3,向下滚动,就像阅读选项卡3的内容一样,然后单击选项卡1. Boom> Page Jump!

这是我的JS:

@Entity
@Cache
public class UserEntity extends WordBuzzEntity {
    @Id
    private String facebookId;
    public User user = new User(null);
    private HashMap<String, Date> accessTokens = new HashMap<String, Date>();
}

这是HTML

$('#tabs div.tab').hide();
$('#tabs div.tab:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div.tab').hide();
    $(currentTab).show();
    return false;
});

这是CSS:

<div id="tabs">
    <ul class="nav">
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1" class="tab">Some content</div>
    <div id="tab-2" class="tab">Some longer content</div>
    <div id="tab-3" class="tab">Some even longer content</div>
</div>

1 个答案:

答案 0 :(得分:1)

您可能需要为目前为止的所有标签使用相同的高度。因此,脚本可能会有所帮助,因为这不是发生的页面跳转,因为您已经return false代替event.preventDefault();

TabDivHeight = 0;
$('#tabs div.tab').each(function () {
  $(this).show();
  if ($(this).height() > TabDivHeight)
    TabDivHeight = $(this).height();
  $(this).hide();
});
$('#tabs div.tab').height(TabDivHeight);

小提琴:http://jsfiddle.net/342fsu8o/

或者如果您更喜欢CSS版本,我会说,为此:

#tabs div.tab {
  background: #FFFFCC;
  clear: both;
  padding: 15px;
  max-height: 200px;
  overflow: auto;
}

小提琴:http://jsfiddle.net/jv3bmtof/

或者,如果您希望平滑过渡,可以使用slideUp()slideDown()

$('#tabs ul li a').click(function () {
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div.tab').slideUp();
    $(currentTab).slideDown();
    return false;
});

小提琴:http://jsfiddle.net/tdxyLvLs/