jQuery实现选项卡的切换:
首先引入 jQuery 文件
jQuery官网:
把这段代码放到一个js文件 里面,然后引入jQuery文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例_JQ版_tab栏</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<!-- 导航栏区域 -->
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<!-- //切换区域 -->
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
</body>
<script src="./jquery_3.5.1.js"></script>
<script>
// 1.获取到每一个元素
$(".tab_list li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
// 当前点击的给它添加上类名,它的兄弟移除类名
// 3. 获取.item的div标签们, 取出对应索引的那个显示出来, 其余都隐藏
$(".item").eq($(this).index()).css("display", "block").siblings().css("display", "none");
// item是每一个切换的内容区域 eq是获取当前点击的下角标 这就可以实现当我点击不同按钮切换不同内容
})
</script>
</html>
效果图:
vue中的导航栏切换:
<template>
<div>
<span v-for="(item,index) in arr" :key="index" class="aaa" :class="index==ind? 'active':''" @click="aaa(index)">{{item}}</span>
</div>
</template>
<script>
export default {
data() {
return {
arr:['运动','箱包','美妆',"家纺"],
ind:0
}
},
methods:{
aaa(index){
this.ind =index
}
}
}
</script>
<style scoped>
.aaa{
width: 40px;
height: 10px;
margin: 0 10px;
}
.active{
color: red;
}
</style>
小程序中实现选项卡的切换:
判断currentTab的值 currentTab:0 默认第一个值高亮