It seems messy. Please describe the functions you need to implement. It may be possible without instructions. Now you come up with a bunch of browser-generated elements, which are not readable, and people don’t know what you want to do, so it’s hard to answer you. When asking questions, first say that you want to implement the description function, and then your code, which is your idea. You can post your results at the end, but it's not necessary.

angular.module('examplexxx', []) .controller('TabsCtrl', ['$scope', function($scope) { $scope.list = [{ text: '1111' }, { text: '2222' }, { text: '3333' }]; }]) .directive('tabs', function() { return { scope: { tablist: '=' }, template: '
{{tab.text}}
', link: function(scope, ele, attrs) { var $ul = angular.element(ele).find('ul'), btline = $ul.children().eq(-1); $ul.on('click', function(e) { var i = angular.element(e.target)[0].getAttribute('data-index'); if (i < 0 || i > 2) return; btline.css('left', i * 100 + 'px'); }) } } });

ul{ list-style: none; position: relative; padding: 0; display: inline-block; } ul:after{ content: ''; display: block; clear: both; } li{ float: left; width: 100px; line-height: 40px; font-size: 15px; text-align: center; cursor: pointer; } li:nth-child(2){ border-left: 1px solid #999; border-right: 1px solid #999; } .bottom-line{ position: absolute; bottom: 0; left: 0; height: 2px; background: red; width: 100px; overflow: hidden; transition: left 0.3s; }