<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs 20200406 tutorial</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app" class="container">
<ul class="tabs-choose">
<li @click="activeTab='1'" :class="[activeTab =='1'?'active':'']"><i class="fa fa-car" style="font-size:22px;color:red;margin-right:5px"></i>Tab One</li>
<li @click="activeTab='2'" :class="[activeTab =='2'?'active':'']"><i class="fa fa-cart-arrow-down" style="font-size:22px;color:red;margin:'0 5px 0 0'"></i>Tab Two</li>
<li @click="activeTab='3'" :class="[activeTab =='3'?'active':'']"><i class="fa fa-diamond" style="font-size:22px;color:red;margin:'0 5px 0 0'"></i>Tab Three</li>
<li @click="activeTab='4'" :class="[activeTab =='4'?'active':'']"><i class="fa fa-hotel" style="font-size:22px;color:red;margin:'0 5px 0 0'"></i>Tab Four</li>
</ul>
<div class="tabs-content">
<div class="content-one" v-if="activeTab =='1'">Content One</div>
<div class="content-one" v-if="activeTab =='2'">Content Two</div>
<div class="content-one" v-if="activeTab =='3'">Content Three</div>
<div class="content-one" v-if="activeTab =='4'">Content Four</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
activeTab: "1",
}
})
</script>
<style>
.tabs-choose{margin-bottom:0;padding:0}
.tabs-choose li{display:inline-block;padding:10px 20px;background:#eee;cursor:pointer;opacity:0.4;//border:1px solid #9c9c9c;border-radius:5px;margin-right:5px;font-size:22px;}
.tabs-choose li.active{opacity:1}
.tabs-content{background:#eee;margin:0 auto;padding:20px}
</style>
</body>
</html>
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
