html 代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6}
.tabs{border:1px solid #a0b3d6margin:100pxwidth:300px}
.tabs-nav a{background:#eaf0fdline-height:30pxpadding:0 20pxdisplay:inline-blockborder-right:1px solid #a0b3d6border-bottom:1px solid #a0b3d6float:left}
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:whiteborder-bottom:1px solid white_position:relative}
.tabs-content{padding:20pxborder-top:1px solid #a0b3d6margin-top:-1px}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:">首页</a>
<a href="javascript:">技术</a>
<a href="javascript:">生活</a>
<a href="javascript:">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:">11111</a>
<a href="javascript:">22222</a>
<a href="javascript:">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content ">222222222222222222222222222222222222</p>
<p class="tabs-content ">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click',true,1000)
tabs('tabs2','mouseover')
}
</script>
tabs.js 代码：
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id)
var tabsBtn = tabsWrap.getElementsByTagName('h2').getElementsByTagName('a')
var tabsContent = getClass('tabs-content',tabsWrap)
var timer = null
var current = 0
show(0)
for(var i = 0,len = tabsBtn.lengthi <leni++){
tabsBtn[i].index = i
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index)
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index)
}
}
}
if(autoplay){
autoPlay()
tabsWrap.onmouseover = function(){
clearInterval(timer)
}
tabsWrap.onmouseout = function(){
autoPlay()
}
}
function autoPlay(){
timer = setInterval(function(){
show(current)
current++
if(current >= tabsBtn.length){
current = 0
}
},time)
}
function show(n){
current = n
for(var i = 0,len = tabsBtn.lengthi <leni++){
tabsBtn[i].className = ''
tabsContent[i].style.display = 'none'
}
tabsBtn[current].className = 'select' + (current + 1)
tabsContent[current].style.display = 'block'
}
function getClass(classname,obj){
var results = []
var elems = obj.getElementsByTagName('*')
for(var i = 0i <elems.lengthi++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i]
}
}
return results
}
}
tabBar——底部标签栏
1、在app.js中使用tabBar（不用引入AtTabBar组件、更新current值 onClick函数）
（1）了解参数
（2）使用
tabBar: {
color:'#808080',
backgroundColor:'#CCDEFF',
selectedColor:'#FFFFFF',
list:[
{
pagePath:'pages/homePage/home_page',
text:'社群',
iconPath:'assets/img/homePageIconUnselected.png',
selectedIconPath:'assets/img/homePageIconSelected.png',
},
{
pagePath:'pages/index/index',
text:'个人',
iconPath:'assets/img/personPageUnselected.png',
selectedIconPath:'assets/img/personPageSelected.png'
}
]
}
2、引入AtTabBar组件
（1）引入组件：import{ AtTabBar }from'taro-ui'
PS:使用带图标标签栏时还需引入以下样式文件（仅按需引用时需要）:
@import"~taro-ui/dist/style/components/icon.scss"
（1）通过onClick事件来更新current值变化
constructor() {
super(...arguments)
this.state = {
current:0
}
}
handleClick (value) {
this.setState({
current: value
})
}
（2）直接使用<AtTabBar>
render () {
return(
<AtTabBar
backgroundColor='#ececec'
color='#ea6bb8'
fixed //固定底部
tabList={[
{title:'待办事项',iconPrefixClass:'fa',iconType:'clock',text:'new'},
{title:'拍照' ,iconType:'camera'},
{title:'通讯录',iconType:'folder',text:'100',max:'99'}
]}
onClick={this.handleClick.bind(this)}
current={this.state.current}
/>
)
}
tabs——标签页
1、引入组件:import{ AtTabs, AtTabsPane }from'taro-ui'
2、与引入AtTabBar组件类似，通过onClick事件来更新current值变化
constructor() {
super(...arguments)
this.state = {
current:0
}
}
handleClick (value) {
this.setState({
current: value
})
}
3、使用
4、参数
不要用document.write()，否则输出的内容会替换掉整个页面已有的内容。此外要注意字符串中引号的嵌套用法。
<div id=mytab></div><input type="button" value="点击创建表格" onclick="tab()">
<script>
function tab(){
var tabs=""
tabs+="<table width='250' border='1'>"
tabs+="<tr>"
tabs+="<td>第一个单元格</td>"
tabs+="<td>第二个单元格</td>"
tabs+="</tr>"
tabs+="<tr>"
tabs+="<td>第三个单元格</td>"
tabs+="<td>第四个单元格</td>"
tabs+="</tr>"
tabs+="</table>"
var div=document.getElementById("mytab")
div.innerHTML=tabs
}
</script>
