<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(5000)</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">商品品价(5000)模板内容</div>
<div class="item">手机社区模板内容</div>
</div>
</div>
2.样式布局
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tab {
width: 1200px;
height: 200px;
margin: 100px auto;
}
.tab_list ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
.tab_list ul li {
width: 150px;
height: 50px;
line-height: 50px;
padding-left: 10px;
text-align: center;
list-style: none;
background-color: #eef1ee;
border: 1px solid #eef1ee;
cursor: pointer;
}
.tab .tab_list .current {
background-color: #d6271f;
color: #fff;
}
.tab .tab_con .item {
display: none;
}
.colour {
color: #d6271f;
}
</style>
<script src=”../js基础+js高级/js/jQuery.min.js“></script>(需要导入jQuery依赖)
<script>
/*案例分析
1.点击上部的小li,当前li添加current类,其余兄弟移除类
2.点击的同时,得到当前小li的索引号
3.让下面里面相应索引号的item显示,其余的item隐藏
*/
$(function () {
$(".tab_list li").click(function () {
$(this).addClass("current").siblings().removeClass("current");
//声明一个变量
let index = $(this).index();
$(".tab_con .item").eq(index).show().siblings().hide();
});
// 鼠标经过小li边文字颜色
$(".tab_list li").mouseenter(function () {
$(this).addClass("colour").siblings().removeClass("colour");
});
// 鼠标离开小li文字颜色去掉
$(".tab_list li").mouseout(function () {
$(this).removeClass("colour");
});
});
</script>
原文地址:https://blog.csdn.net/shi15926lei/article/details/127040965
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_40182.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。