*{padding:0;margin:0;font-family:”microsoft yahei”!important;}
body{background-color:#efefef;}
ul,li{list-style:none;}
a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:auto;}
/*tab module*/
.tab-module{width:100%;height:auto;background-color:#ffffff;overflow-x:hidden;}
.tab-titles{width:100%;position:relative;overflow:hidden;}
.tab-titles li{max-width:100%;height:50px;line-height:50px;float:left;text-align:center;border-bottom:3px solid #999999;color:#999999;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative;}
.tab-titles li.active{border-bottom:3px solid #FF1493;color:#FF1493;}
.tab-titles li:after{content:””;display:block;width:1px;height:60%;position:absolute;right:-1px;top:20%;;background-color:#999999;}
.tab-titles li:last-child:after{content:none;}
.tab-content{min-height:100%;position:relative;overflow:hidden;border-bottom:1px solid #999999;}
.tab-content li{display:block;max-width:100%;height:auto;min-height:20px;float:left;box-sizing:border-box;padding:14px;
<!DOCTYPE html>
<html ng-app=”myApp”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<script src=”http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js“></script>
<title>angularjs实现tab水平滑动</title>
<link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>
<body ng-controller=”tabCtrl”>
<div class=”tab-module”>
<ul class=”tab-titles”>
<li ng-repeat=”title in tabTitles” ng-click=”tabClick($index)” ng-class=”{active:$index==tabIndex}” ng-style=”singleTabStyle”>{{title}}</li>
</ul>
<ul class=”tab-content” ng-style=”contentStyle”>
<li ng-repeat=”content in tabContents” ng-bind-html=”content|to_trusted” ng-style=”singleTabStyle”></li>
</ul>
</div>
</body>
<script>
var app=angular.module(“myApp”,[]);
//controller:tab水平切换
app.controller(“tabCtrl”,function($scope,$interval){
//tab数据
$scope.tabTitles=[“服务内容”,”服务须知”,”其他”];
$scope.tabContents=[
‘温馨提示<br>了解您的病史、症状及服药情况<br>提醒您就诊所需准备的物品（如病历本、既往检查报告等）<br>全程陪护<br>提前根据您的情况规划就诊流程，节省您宝贵的时间<br>帮您取号、陪您候诊、替您缴费、代您取药、陪同检查输液、送取化验标本、等候检查结果、协助办理住院手续<br>整理档案<br>整理本次就诊档案，帮您填写用药指导’,
“服务须知<br>2、服务当日，护士将提前到达医院规划就诊流程，并在约定位置等您<br>3、护士会在与您见面并征得同意后开始服务<br>4、服务过程中遇到的任何问题及建议，请联系小趣好护士客服<a href=’tel:400-921-5800′>400-921-5800</a>，我们会及时处理并反馈。”,
“新tab”
];
//内容css
$scope.contentStyle={
“width”:$scope.tabTitles.length*100+”%”,
“transition“:”800ms margin-left”,
“margin-left”:”0%”
};
//单个Tab css
$scope.singleTabStyle={
“width”:100/$scope.tabTitles.length+”%”
};
//tab点击
$scope.tabIndex=0;//记录当前tab index
$scope.tabClick=function(index){
$scope.tabIndex=index;
$scope.contentStyle[“margin-left”]=-100*index+”%”;
};
});
//filter:将string激活为html代码
app.filter(‘to_trusted’, [‘$sce’, function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
</script>
</html>
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/208/
微信扫一扫 
支付宝扫一扫 
