使用 md-tab (css) 的类似标签的浏览器答案

【问题标题】：browser like tab using md-tab (css)使用 md-tab (css) 的类似标签的浏览器
【发布时间】：2018-01-13 06:00:37
【问题描述】：

我正在寻找 使用 md-tab 的类似标签的浏览器 CSS。请为您的参考找到随附的屏幕截图。覆盖材料选项卡 css 完全令人头疼。

【问题讨论】：

你试过了吗？
我尝试过但无法重叠活动选项卡的顶部边框，如屏幕截图所示。我使用 ul li 使用导航选项卡，但问题是我需要 md-tab 提供的滚动选项卡功能。如果你想要截图的源代码参考链接github.com/rahil471/browser-like-tabs-angularjs
然后分享您尝试过的代码，以便我们提供帮助。我们不可能从头开始编写代码。
请找codepen codepen.io/shankzpatil/pen/LexXeK

标签： javascript css angularjs tabs angular-material

【解决方案1】：

我使用引导程序 nav-tabs 尝试了您的 GitHub 代码。尝试使用active:after重叠边框问题

堆栈片段

(function() {
  angular.module('tabDemo', [])

    .controller('tabCtrl', ['$scope', function($scope) {
      /** holds tabs, we will perform repeat on this **/
      $scope.tabs = [{
        id: 1,
        content: 'This is a default tab on load'
      }]

      $scope.counter = 1;
      /** Function to add a new tab **/
      $scope.addTab = function() {
        $scope.counter++;
        $scope.tabs.push({
          id: $scope.counter,
          content: 'Any Content'
        });
        $scope.selectedTab = $scope.tabs.length - 1; //set the newly added tab active. 
      }

      /** Function to delete a tab **/
      $scope.deleteTab = function(index) {
        $scope.tabs.splice(index, 1); //remove the object from the array based on index
      }

      $scope.selectedTab = 0; //set selected tab to the 1st by default.

      /** Function to set selectedTab **/
      $scope.selectTab = function(index) {
        $scope.selectedTab = index;
      }
    }])
})()

.nav-tabs {
  margin-top: 10px;
  white-space: nowrap;
  width: 100%;
  overflow: auto;
  padding-top: 10px;
}

.nav.nav-tabs>li {
  float: none;
  margin-bottom: -1px;
  display: inline-block;
}

.nav-tabs>li>a {
  cursor: pointer;
  margin: 0;
  border: 1px solid #ccc;
  background: #eee;
  margin-left: -1px;
}

.nav-tabs li a span:hover {
  color: red;
  cursor: pointer;
}

.nav-tabs>li.active>a {
  z-index: 1;
}

.nav-tabs>li.active>a:after {
  content: "";
  position: absolute;
  top: -10px;
  left: -5px;
  bottom: -1px;
  right: -5px;
  background: white;
  z-index: -1;
  border: 1px solid #ddd;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body ng-app="tabDemo">
  <div role="tabpanel" ng-controller="tabCtrl">
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" ng-repeat="tab in tabs" ng-click="selectTab($index)" ng-class="{'active':selectedTab == $index}">
        <a data-target="#tab" aria-controls="home" role="tab" data-toggle="tab">Tab {{tab.id}} <span ng-click="deleteTab($index)" class="glyphicon glyphicon-remove"></span></a>
      </li>
      <li role="presentation" ng-click="addTab()">
        <a aria-controls="home" role="tab" data-toggle="tab">( + )</a>
      </li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="tab">
        <h1>Tab {{tabs[selectedTab].id}}</h1>
        <h3>Content:- {{tabs[selectedTab].content}}</h3>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
</body>

【讨论】：

哦，不好意思说.. 但我已经用 ul li tab 做了。我需要在 codepen 中提到的 md-tab 上相同。
顺便说一句，您共享的ul li 结构不起作用，您可以参考上面的示例在md-tab 中实现。
很高兴它帮助了你！