如何实现tabs选项卡效果

JavaScript013

如何实现tabs选项卡效果,第1张

前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。

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>