<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab标签切换效果</title>
<style>
*{ margin:0padding:0list-style: none}
body {font:12px/1.5 Tahoma}
#outer {width:450pxmargin:150px auto}
#tab {overflow:hiddenzoom:1background:#000border:1px solid #000}
#tab li {float:leftcolor:#fffheight:30px cursor:pointer line-height:30pxpadding:0 20px}
#tab li.current {color:#000background:#ccc}
#content {border:1px solid #000border-top-width:0}
#content ul {line-height:25pxdisplay:none margin:0 30pxpadding:10px 0}
</style>
</head>
<body>
<!-- html代码begin -->
<div id="outer">
<ul id="tab">
<li class="current">tab标签</li>
<li>qq在线客服代码</li>
<li>css3</li>
</ul>
<div id="content">
<ul style="display:block">
<a href="">tab标签</a>
</ul>
<ul>
<a href="">服代码</a>
</ul>
<ul>
<a href="">css</a>
</ul>
</div>
</div>
<!-- html代码end -->
<script src="jquery.min.js"></script>
<script>
第二个实例是关于标签页切换的，先看一下效果：这也是一个很常见的交互效果，以往正常的javascript写法是给各个按钮绑定事件来切换不同的层，当然也可以用纯css写，给上面的三个切换的层分别添加一个单选按钮的兄弟节点，再用绝对定位把单选按钮定位在三个button上面，这样就可以用:checked伪类来单选按钮的兄弟元素，即对应的不同的层，我简单的写了一下DOM结构，大概就是这样：
那么用vue.js实现上述的效果，其实也有两种途径，一种使用vue-router，vue-router是vue.js的一个路由组件，在单页面应用中非常非常流行，如果切换的层数据量非常大的话，比如每个层都要有服务器进行大量的数据交互，那么强烈建议使用vue-router，因为vue-router在每次切换路由的过程中，都会自动销毁（destroyed）前面的组件，这样在频繁的操作中页面也不会卡，而且vue-router也定义了页面切换过程中的过渡动画。
如果数据量并不复杂的话，可以直接通过vue.js定义切换状态来切换不同的层。
首先先把template和css写好：
其中introduce、chatbar、videobar分别代表三个需要跟随button切换的组件，接下来就可以给vue.js的button节点绑定事件来操控点击状态：
点击不同的button，会让active的状态改变，同时这个状态会作用到button上面，比如让被点击的button有个高亮的效果等等。
那么如何让active的状态作用到弹出层呢？其实定义一个computed函数就可以了：
总结
以上所述是小编给大家介绍的vue.js实现标签页切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:Vue.js实现微信过渡动画左右切换效果vue.js 左侧二级菜单显示与隐藏切换的实例代码Vue.js tab实现选项卡切换Vue.js组件tab实现选项卡切换Vue.js组件tabs实现选项卡切换效果
bootstrap相对reactjs来说是内容而后者是框架。reactjs官方下载包里example里有和bootstrap整合的例子,所以两者不是竞争关系
'use strict'var data = [{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}]
//Bootstrap标签项
var BootstrapNavLi = React.createClass({
handleClick:function(){
data=[{no:0,name:"Home",active:"",href:"#"},{no:1,name:"Profile",active:"",href:"#"},{no:2,name:"Messages",active:"",href:"#"}]
data.splice(this.props.no,1) //删除指定位置指定个数的元素
data.splice(this.props.no,0,{name:this.props.name,active:"active",href:"#"}) //插入元素
},
render:function(){
return(
<li onClick={this.handleClick} role="presentation" className={this.props.active}>
<a href={this.props.href}>
{this.props.name}
</a>
</li>
)
}
})
//Bootstrap标签页
var BootstrapNav = React.createClass({
getInitialState: function() {
return {data: data}
},
hClick:function(){ //初始化
this.setState({data:data})
},
render: function(){
var lis = this.state.data.map(function(li,index){
return <BootstrapNavLi href={li.href} name={li.name} active={li.active} no={li.no} key={index} />
})
return (
<ul onClick={this.hClick} className={this.props.className}>
{lis}
</ul>
)
}
})
//外层div，包含标题
var Box = React.createClass({
render: function() {
return (
<div className="NavExample">
<h1>React Bootstrap 标签页切换实例</h1>
<BootstrapNav className="nav nav-pills nav-justified"/>
</div>
)
}
})
React.render(<Box></Box>, document.getElementById('example'))
