jquery版tab切换

最新推荐文章于 2024-01-13 14:06:42 发布

我一直在路上

最新推荐文章于 2024-01-13 14:06:42 发布

阅读量80

点赞数

分类专栏： jquery 文章标签： jquery版tab切换

本文链接：https://blog.csdn.net/weixin_44356616/article/details/90056752

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

直接从项目粘出来的，样式什么的可能有点问题

HTML代码

css代码

.swiper_right{
width: 400px;
height: 253px;
margin-top: 30px;
margin-left: 20px;
}

.swiper_right .right_nav{
width: 100%;
}
.swiper_right .right_nav span{
display: inline-block;
width: 50px;
text-align: center;
font-size: 16px;
position: relative;
padding: 0 6px;
}

.swiper_right .right_nav span:hover{
color: #b49857;
cursor: pointer;
}

.swiper_right .right_nav span.active{
color: #b49857;
}
.swiper_right div.news-container{
margin-top: 20px;
}
.swiper_right div.news-container .news-items .news-item{
display: flex;
height: 38px;
border-bottom: dashed 1px #a0a0a0;
line-height: 38px;
}
.swiper_right div.news-container .news-items .news-item:hover p:nth-child(1){
color: #b49857;
}

.swiper_right div.news-container .news-items .news-item div.news-title{
flex: 1;
overflow: hidden;
}
.swiper_right div.news-container .news-items .news-item div.news-title>a{
display: flex;
justify-content: space-between;
box-sizing: border-box;
flex: 1;
text-align: left;
}
.swiper_right div.news-container .news-items .news-item div.news-title>a>p{
font-size: 14px;
color: #626262;
max-width: 20em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
}

js代码

$(’ .swiper_right .right_nav span’).click(function(){
$(this).addClass(‘active’).siblings().removeClass(‘active’)
let index = $(this).index();
$(’ .swiper_right .news-items’).eq(index).show().siblings().hide();
});
**