我可以为上面的选项卡式菜单提供 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;
}
最佳答案
您可以使用 Angular-Bootstrap 来完成 很容易，无需使用 Jquery 插件。
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 来实现它，试试这个
<!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>
关于javascript - 如何定义CSS以获得简单的选项卡式菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24773067/