jQuery Tabs在Android移动设备上无法切换的问题求助

我之前遇到过一模一样的情况——桌面端Tabs切换流畅，到了安卓的Chrome和Firefox就完全没反应，控制台还没报错，折腾了好一会儿才找到问题根源。大概率是移动端触摸事件的兼容性问题，下面给你几个靠谱的解决方案：

原因分析 #

jQuery的原生click事件在部分安卓浏览器中，对<a>标签的响应会有延迟或者失效，这是因为移动端浏览器默认会给<a>标签添加触摸相关的默认行为（比如点击高亮、300ms延迟），这些行为可能干扰了我们自定义的切换逻辑。

解决方案 #

1. 绑定touchstart + click双事件，覆盖移动端和桌面端 #

修改你的jQuery代码，同时绑定触摸和点击事件，并且处理重复触发的问题：

// tabs 
$(document).ready(function() {
  $('.tabs .tab-links a').on('touchstart click', function(e) {
    // 先阻止默认行为，避免跳转或浏览器默认触摸动作
    e.preventDefault();
    
    // 防止touchstart触发后又触发click，造成重复执行
    if (e.type === 'touchstart') {
      $(this).off('click');
    }

    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).siblings().slideUp(400);
    $('.tabs ' + currentAttrValue).delay(400).slideDown(400);

    // Change/remove current tab to active
    $(this).parent('li').addClass('active').siblings().removeClass('active');
  });
});

2. 添加CSS优化移动端点击体验 #

给.tab-links a添加以下CSS属性，移除安卓默认的点击高亮，提升响应速度：

.tab-links a {
  /* 保留你原来的样式 */
  display: inline-block;
  text-decoration: none;
  color: #757575;
  transition: all linear 0.15s;
  
  /* 新增优化样式 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮框 */
  touch-action: manipulation; /* 禁用双击缩放，减少点击延迟 */
}

3. 检查是否有元素遮挡可点击区域 #

有时候移动端元素的padding、z-index或者绝对定位会导致<a>标签被其他元素覆盖，无法触发点击。你可以临时给.tab-links a添加outline: 2px solid red，看看点击区域是否正确，调整相关元素的层级或者尺寸。

测试完整代码 #

把修改后的代码整合起来，应该就能正常工作了：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
/* Clearfix */
.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

ul.tab-links {
  padding: 0;
  margin: 0;
}

.tab-links li {
  margin: 0px 14px;
  float: left;
  list-style: none;
}

.tab-links a {
  display: inline-block;
  text-decoration: none;
  color: #757575;
  transition: all linear 0.15s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.tab-links a:hover {
  color: #212121;
  text-decoration: none;
}

li.active a, li.active a:hover {
  color: #F44436;
}

/*----- Content of Tabs -----*/
.tab-content {
  padding: 5px;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}
</style>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Summary</a></li>
    <li><a href="#tab2">Info</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Lorem ipsum</p>
    </div>
    <div id="tab2" class="tab">
      <p>Nulla fermentum nibh sit</p>
    </div>
  </div>
</div>
<script>
// tabs 
$(document).ready(function() {
  $('.tabs .tab-links a').on('touchstart click', function(e) {
    e.preventDefault();
    
    if (e.type === 'touchstart') {
      $(this).off('click');
    }

    var currentAttrValue = $(this).attr('href');

    $('.tabs ' + currentAttrValue).siblings().slideUp(400);
    $('.tabs ' + currentAttrValue).delay(400).slideDown(400);

    $(this).parent('li').addClass('active').siblings().removeClass('active');
  });
});
</script>

先试试第一种方案，这是解决这类问题最直接的方法。如果还是不行，再检查CSS或者页面布局是否有遮挡问题。

内容的提问来源于stack exchange，提问作者Joey Benko