带有选项卡和内容的响应式指示线

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>

带有选项卡和内容的响应式指示线

responsive indicator line with tab and content

css

wordpress

jquery

animation