$(".select-type").click(function(){
$("div[data-select-type]").css("visibility","hidden")//先把所有的Tab隐藏
$(this).css("visibility","visible")//显示当前的tab
})
1、用绝对定位。把所有tab选项卡重叠放到一个位置，显示其中一个的同时，隐藏其他的2、用浮动。所有tab选项卡放到同一行，设置左浮动，把选项卡的父级设置溢出隐藏和相对定位，监听点击事件判断要切换到哪个选项卡，进行偏移。
angularjs中tab标签切换的实现方法如下：
1、定义div容器：
<div ng-app="TabsApp"> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li> </ul> <div id="mainView"> <div ng-include="currentTab"></div> </div> </div> <script type="text/ng-template" id="one.tpl.html"> <div id="viewOne"> <h1>View One</h1> <p>Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc.</p> </div> </script> <script type="text/ng-template" id="two.tpl.html"> <div id="viewTwo"> <h1>View Two</h1> <p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p> </div> </script> <script type="text/ng-template" id="three.tpl.html"> <div id="viewThree"> <h1>View Three</h1> <p>In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.</p> </div> </script></div>
2、angularjs实现方法：
angular.module('TabsApp', []).controller('TabsCtrl', ['$scope', function ($scope) { $scope.tabs = [{ title: 'One', url: 'one.tpl.html' }, { title: 'Two', url: 'two.tpl.html' }, { title: 'Three',
url: 'three.tpl.html' }] $scope.currentTab = 'one.tpl.html' $scope.onClickTab = function (tab) { $scope.currentTab = tab.url } $scope.isActiveTab = function(tabUrl) { return tabUrl == $scope.currentTab }}])
3、实现效果
