同原理用jQuery和Vue实现的Tab选项卡网页特效
Tab选项卡网页特效，是我们写页面时经常用到的，下面的这两个效果是一样的，原理都是利用索引值来做的，样子很简单没花很多时间去美化下，凑合着看吧。第一个用jQuery实现的，第二个用vue实现，就是不用操作Dom了，逻辑代码就一个索引值的事，我感觉还是vue实现的更简单吧。
1.jQuery实现的Tab选项卡，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>用jQuery实现tab选项卡</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:12px;padding:100px;}
ul {list-style-type:none;}
.box ul{height:30px;line-height:30px;}
.box ul li{float:left;padding:0 10px;position:relative;
cursor:pointer;border:1px solid #000;margin-right:5px;
border-bottom:none;border-radius: 4px;}
.content{width:225px;border:1px solid #000;
padding:10px;height:100px;}
* html .content{margin-top:-1px;}
.box ul li.one{background:red;}
</style>
</head>
<body>
<div class="box">
<!--菜单部分-->
<ul>
<li class="one">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
<!--内容部分-->
<div class="content">
<div class="ct">内容一</div>
<div class="ct">内容二</div>
<div class="ct">内容三</div>
<div class="ct">内容四</div>
</div>
</div>
<script src="http://tangjiusheng.cn/d/js/Jquery"></script>
<script type="text/javascript">
$(function(){
$('.ct:gt(0)').hide(); /*gt(0) 大于第一个*/
var tab = $('.box ul li');
tab.click(function(){ /*click点击事件和hover悬停事件互换*/
$(this).addClass('one').siblings().removeClass(); /*siblings 他的兄弟*/
var tab_index = tab .index(this);
$('.ct').eq(tab .index(this)).show().siblings().hide();
});
});
</script>
</body>
</html>效果预览：http://tangjiusheng.cn/d/demo/jquery-tab
2.Vue实现的Tab选项卡，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>用Vue实现tab选项卡</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:12px;padding:100px;}
ul {list-style-type:none;}
.box ul{height:30px;line-height:30px;}
.box ul li{float:left;padding:0 10px;position:relative;
cursor:pointer;border:1px solid #000;margin-right:5px;
border-bottom:none;border-radius: 4px;}
.content{width:225px;border:1px solid #000;
padding:10px;height:100px;}
.content div{display:none;}
* html .content{margin-top:-1px;}
.box ul li.on{background:red;}
.content div.ct{display:block;}
</style>
</head>
<body>
<div id="app">
<div class="box">
<!--菜单部分-->
<ul>
<li v-on:click='tabs(index)' :class='tabsIndex==index?"on":""' :key='item.id' v-for='(item,index) in lis'>{{item.title}}</li>
</ul>
<!--内容部分-->
<div class="content">
<div :class='tabsIndex==index?"ct":""' :key='item.id' v-for='(item, index) in lis'>{{item.text}}</div>
</div>
</div>
</div>
<script src="http://tangjiusheng.cn/d/js/Vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabsIndex: 0, //默认的索引
lis: [{
id: 0,
title: '菜单一',
text: '内容一'
},{
id: 1,
title: '菜单二',
text: '内容二'
},{
id: 2,
title: '菜单三',
text: '内容三'
},{
id: 3,
title: '菜单四',
text: '内容四'
}]
},
methods: {
tabs: function(index){
this.tabsIndex = index;
}
}
});
</script>
</body>
</html> 除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/vue/180.html
原文地址：https://tangjiusheng.cn/vue/180.html