Question

我正在寻找使用md-tab 的浏览器的 css。请找到您的参考的附加截图。覆盖材料标签css是完全令人头疼的问题。

Answer 1

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

Stack Snippet

(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>

使用md-tab（css）的浏览器

1 个答案: