单个页面上的多个选项卡

Question

我需要在单个页面上有多个选项卡，如何调整代码以适应此？

请参阅codepen

这是我的jQuery至今：

var e = $(".tabContainer ul li a"); 
    $(".tabContents.active").show(); 
    e.click(function (t) { 
     t.preventDefault(); 
     if (!$(this).hasClass("active")) { 
      var n = $(this).attr("href"); 
      e.removeClass("active"); 
      $(this).addClass("active"); 
      $(".tabContents").hide(); 
      $(n).fadeIn() 
     } 
    }); 

我猜它放到功能，并使用每个选项卡容器上的唯一的ID打电话了吗？

请原谅html和css，这只是真实事物的粗略副本。

Answer 1

与css一起工作试试flexbox，它非常方便，专为像你这样的应用程序而设计。

通过此链接。

http://css-tricks.com/snippets/css/a-guide-to-flexbox/