<!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实现选项卡切换效果
今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：第一步：在连接样式表的元素里定义一个id,例如
复制代码
代码如下:
<link
href=”1.css”
rel=”stylesheet”
type=”text/css”
id=”css”>
我定义的id是css。
第二步：写一个js函数，代码如下：
复制代码
代码如下:
<script
type=”text/javascript”>
function
change(a){
var
css=document.getElementById(“css”)
if
(a==1)
css.setAttribute(“href”,”1.css”)
if
(a==2)
css.setAttribute(“href”,”2.css”)
}
</script>
这个函数的code可以放在页面的任何地方。
第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：
复制代码
代码如下:
<a
href=”#”
onClick=”change(1)”>1.css</a>
<a
href=”#”
onClick=”change(2)”>2.css</a>
该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：
在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%
方法二：
第一步：导入两套css文件
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
title="样式A"
href="css/people1.css"
/>
<link
rel="alternate
stylesheet"
type="text/css"
title="样式B"
href="css/people2.css"
/>
第二步：写切换的js函数
复制代码
代码如下:
<script
type="text/javascript">
var
title
=
"样式A"
function
setStyle(){
//只是样式A
和样式B切换
if(title=="样式A"){
title
=
"样式B"
}else{
title
=
"样式A"
}
var
i,links
//用dom方法获取所有link元素
links
=
document.getElementsByTagName("link")
//判断每个link元素中是否含有style字符串
，用来判断此link元素为样式表link
，同时判断此link是否包含title属性
for(i=0
links[i]
i++){
if(links[i].getAttribute("rel").indexOf("style")
!=
-1
&&
links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled
=
true
//再来判断title中是否有指定的title字符串
有则把当前的link设为可视
即激活当前的link
if(links[i].getAttribute("title").indexOf(title)
!=
-1){
links[i].disabled
=
false
//alert("ok")
}
}
}
}
</script>
第三步：在html标签中调用切换的js函数
复制代码
代码如下:
<a
href="#"
onclick="setStyle()"
>1</a>
<a
href="#"
onclick="setStyle()">2</a>
<a
href="#"
onclick="setStyle()">3</a>
<a
href="#"
onclick="setStyle()">4</a>
<a
href="#"
onclick="setStyle()">5</a>
