Looking for CSS code for the tabbed menu shown above. I've tried several options but haven't been able to achieve the exact design I want. Here is the directive, HTML, and CSS code provided:
<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>
Directive used:
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 code applied:
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}