带有标签和内容的响应式指示线

Question

谁能帮我创建一个动画，单击任何选项卡，指示线应该移动到活动选项卡（活动选项卡的一侧，静态内容的另一侧）。我尝试减小指示线图像的宽度，但它也从另一侧压缩。还有另一种方法吗？任何帮助，将不胜感激。见附图。 https://i.stack.imgur.com/sAL49.png

Answer 1

你可以这样做：

function select(nb) {
  $("a").removeClass('underline');
  $("#" + nb).addClass('underline')
}

.underline {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="1" onclick="select('1')">1</a>
<a id="2" onclick="select('2')">2</a>
<a id="3" onclick="select('3')">3</a>
<a id="4" onclick="select('4')">4</a>