Vue
html:
<div id="app">
<ul class="tabs">
<li @click="change(1)" :class="flag==1?'active':''">選項一</li>
<li @click="change(2)" :class="flag==2?'active':''">選項二</li>
</ul>
<div v-show="flag==1" class="content">內(nèi)容一</div>
<div v-show="flag==2" class="content">內(nèi)容二</div>
</div>
css:
* {margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;}
#app {
width: 200px;
margin: 100px auto;
}
.tabs {
border: 1px solid #eeeeee;
width: 200px;
overflow: hidden;
}
.tabs li {
border: 1px solid salmon;
list-style: none;
float: left;
width: 98px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
.active {
font-weight: bold;
color: white;
background-color: sandybrown;
}
.content {
width: 200px;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid salmon;
border-top: none;
}
js:
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
flag:1
},
methods:{
change:function(num){
this.flag=num;
}
}
})
</script>
js
html:
<div id="container">
<a href="#" class="on">選項一</a>
<a href="#">選項二</a>
<div class="clear"></div>
<div class="content" style="display:block;">內(nèi)容一</div>
<div class="content">內(nèi)容二</div>
</div>
css:
* {margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;}
#container {
width: 400px;
margin: 100px auto;
}
#container a {
display: block;
width: 198px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
border: solid 1px #FF4400;
border-bottom: none;
color: #333333;
text-decoration: none;
}
#container a:hover {
color: #FF4400;
}
#container a.on {
background: #FF4400;
color: #fff;
}
.content {
width: 398px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px #FF4400;
display: none;
}
.clear {clear: left;}
js:
var tabs = document.querySelectorAll("a");
var cons = document.getElementsByClassName("content");
var tabsLength = tabs.length;
for( let i = 0 ; i < tabsLength ; i++ ){
tabs[i].onclick = function(){
for( var j = 0 ; j < tabsLength ; j++ ){
tabs[j].className = "";
cons[j].style.display = "none";
}
this.className = "on";
cons[i].style.display = "block";
}
}
jQuery
html:
<div id="container">
<div class="tabs">
<a href="#" class="on">選項一</a>
<a href="#">選項二</a>
</div>
<div class="contents">
<p class="content" style="display:block;">內(nèi)容一</p>
<p class="content">內(nèi)容二</p>
</div>
</div>
css:
* {margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;}
#container {
width: 400px;
margin: 100px auto;
}
.tabs {
overflow: hidden;
}
.tabs a {
display: block;
width: 198px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
border: solid 1px #FF4400;
border-bottom: none;
color: #333333;
text-decoration: none;
}
.tabs a:hover {
color: #FF4400;
}
.tabs a.on {
background: #FF4400;
color: #fff;
}
.content {
width: 398px;
height: 100px;
line-height: 100px;
text-align: center;
border: solid 1px #FF4400;
display: none;
}
js:
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// 方式一
$(document).ready(function(){
$('.tabs').find('a').click(function () {
var index = $(this).index();
$(this).attr('class','on').siblings().attr('class','');
$('.content').eq(index).css('display','block').siblings().css('display','none');
});
})
// 方式二
$(function () {
$('.tabs a').click(function () {
var index = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$('.content').eq(index).show().siblings().hide();
})
});
</script>
