Question

enter image description here

我可以为上面的标签菜单提供CSS，我尝试了很多但未能得到确切的设计。下面是我的指令，html和css代码我的HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <p>Content for Tab 1</p>
    </div>
    <div id="tabs-2">
        <p>Content for Tab 2</p>
    </div>
    <div id="tabs-3">
        <p>Content for Tab 3</p>
    </div>
</div>

我的指示

app.directive('basictabs', function() {
    return {

      restrict: 'AE',
      replace: true,
     templateUrl :'app/partials/basictabs.html',
         link: function(scope, elm, attrs) {
             var jqueryElm = $(elm[0]);
             $(jqueryElm).tabs();
         }

  };
});

我的css

#tabs {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

Answer 1

您可以轻松使用 Angular-Bootstrap ，而无需使用Jquery插件。

的 Working Demo

<强> basictabs.html

<tabset> <tab heading="Tab 1"> <p>Content for Tab 1</p> </tab> <tab heading="Tab 2"> <p>Content for Tab 2</p> </tab> <tab heading="Tab 3"> <p>Content for Tab 3</p> </tab> </tabset>

但是如果你非常具体并希望通过使用JQuery UI来实现这一点

<强> Working Demo

<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script src="https://code.angularjs.org/1.0.3/angular.min.js"></script> <link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="app.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body ng-controller="myCtrl"> <basictabs></basictabs> </body> </html>

Answer 2

检查这是否对您有帮助。

DEMO

JQUERY

$('#tabs a').click(function(){

  var tabId = $(this).attr('href');
  $('#tabs li').removeClass('active');
  $(this).parent('li').addClass('active');
  $('.content > div').hide();
  $(tabId).show()
})

如何定义css以获得简单的选项卡式菜单

2 个答案: