jquery+css写的一款简单的tabs滑动特效

最新推荐文章于 2023-06-26 09:37:19 发布

草灯

最新推荐文章于 2023-06-26 09:37:19 发布

阅读量905

点赞数

分类专栏： web前端文章标签： jQuery tabs html

本文链接：https://blog.csdn.net/eadio/article/details/30506129

版权

web前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

最终实现的效果，都是采用css来实现美化界面的，，现在想到的就是都是吧数据都展示出来，其他隐藏。。滑动的时候到哪里就显示对应栏目的内容，但是最近看到火狐的首页，有很多菜单项，不知道是不是也是全部显示到页面上了，然后其他内容隐藏，滑动时，在对应显示内容，如下：

如果有答案的希望分享下，是怎么处理这种的。。。

那接下来上代码html：

<div class="hot-news-tabs">
<h2 class="hot-news-tabs-title clearfix">

十大热门文章
</h2>

<ul class="hot-news-tabs-btn clearfix">
<li>今日</li>
<li>昨日</li>
<li>一周</li>
</ul>

<ul class="hot-news-tabs-cont cont01">
<li>
1
<a href="#">报废车撞上违章车司机无证酒驾获罪报废车撞上违章车司机无证酒驾获罪</a>
</li>
<li>
2
<a href="#">撞死多名大学生肇事司机获刑5年</a>
</li>
<li>
3
<a href="#">车祸赔偿起纠纷拳脚相向被判刑</a>
</li>
<li>
4
<a href="#">重庆江津区首例醉驾案司机被判拘役4个月</a>
</li>
<li>
5
<a href="#">交通肇事后找人顶罪的法律责任</a>
</li>
<li>
6
<a href="#">肇事逃逸获刑3年</a>
</li>
<li>
7
<a href="#">一起交通事故五人受审获刑</a>
</li>
<li>
8
<a href="#">临海一民警醉驾撞死人后逃逸被刑拘</a>
</li>
<li>
9
<a href="#">“黑摩的”肇事获刑4年半赔偿38万</a>
</li>
<li>
10
<a href="#">车辆失控致一死一伤车主被判交通肇事罪</a>
</li>
</ul>
<ul class="hot-news-tabs-cont cont02">
<li>
1
<a href="#">报废车撞上违章车司机无证酒驾获罪</a>
</li>
<li>
2
<a href="#">撞死多名大学生肇事司机获刑5年</a>
</li>
<li>
3
<a href="#">车祸赔偿起纠纷拳脚相向被判刑</a>
</li>
<li>
4
<a href="#">13人肇事逃逸遭终生禁驾</a>
</li>
<li>
5
<a href="#">交通肇事后找人顶罪的法律责任</a>
</li>
<li>
6
<a href="#">肇事逃逸获刑3年</a>
</li>
<li>
7
<a href="#">交通事故水坑起祸端</a>
</li>
<li>
8
<a href="#">临海一民警醉驾撞死人后逃逸被刑拘</a>
</li>
<li>
9
<a href="#">“黑摩的”肇事获刑4年半赔偿38万</a>
</li>
<li>
10
<a href="#">车辆失控致一死一伤车主被判交通肇事罪</a>
</li>
</ul>
<ul class="hot-news-tabs-cont cont03">
<li>
1
<a href="#">湖北潜江法院集中宣判3起醉酒驾车案</a>
</li>
<li>
2
<a href="#">驾车盗窃出车祸一亡一逃一获刑</a>
</li>
<li>
3
<a href="#">车祸赔偿起纠纷拳脚相向被判刑</a>
</li>
<li>
4
<a href="#">重庆江津区首例醉驾案司机被判拘役4个月</a>
</li>
<li>
5
<a href="#">交通肇事后找人顶罪的法律责任</a>
</li>
<li>
6
<a href="#">肇事逃逸获刑3年</a>
</li>
<li>
7
<a href="#">一起交通事故五人受审获刑</a>
</li>
<li>
8
<a href="#">临海一民警醉驾撞死人后逃逸被刑拘</a>
</li>
<li>
9
<a href="#">“黑摩的”肇事获刑4年半赔偿38万</a>
</li>
<li>
10
<a href="#">耍小聪明致使他人顶替肇事骗保被拘</a>
</li>
</ul>
</div>

首先那个标题左边的红色小块和数字背景快，我都是直接使用span标签来实现的。。

然后是css样式：

.hot-news-tabs{
width:298px;
margin:0 auto;
text-align:left;
font:normal 14px "Microsoft Yahei";
}
.hot-news-tabs .hot-news-tabs-title{
height:48px;
line-height:48px;
color:#000;
text-indent:8px;
font-weight:bold;
}
.hot-news-tabs .hot-news-tabs-title span{
display:block;
float:left;
width:5px;
height:16px;
background:#d80e00;
margin-top:15px;
}
.hot-news-tabs .hot-news-tabs-btn{ margin-left:1px;}
.hot-news-tabs .hot-news-tabs-btn li{
float:left;
width:98px;
height:38px;
line-height:38px;
margin:0 0 0 -1px;
border:solid 1px #d8d8d8;
background:#f3f3f3;
text-align:center;
cursor:pointer;
}
.hot-news-tabs .hot-news-tabs-btn li.current{
border:0 none;
background:none;
border-top:solid 4px #da0d00;
}
.hot-news-tabs .hot-news-tabs-cont{ display:none; margin-top:10px;}
.hot-news-tabs .hot-news-tabs-cont li{
width:298px;
white-space:nowrap;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
overflow:hidden;
height:30;
line-height:30px;
}
.hot-news-tabs .hot-news-tabs-cont li span.num{
display:inline-block;
width:15px;
height:15px;
line-height:15px;
margin-right:6px;
background:#515151;
color:#fff;
text-align:center;
}
.hot-news-tabs .hot-news-tabs-cont li span.redbg{ background:#d81100;}

重点是这些，当然，前面我有加入yui的reset的css样式，这里没指出来，还有中间的昨日、今日、一周的实现我是直接使用li的border来写，然后结合负margin来实现中间的border重叠，当然这样的话，整体会左偏移一像素，所以我右对负的ulmargin-left:1px来右移达到对齐效果。。

$(document).ready(function(){
var $tabsBtn = $(".hot-news-tabs-btn li");
var $tabsCont = $(".hot-news-tabs-cont");
$tabsBtn.eq(0).addClass("current");
$tabsCont.eq(0).show();
$tabsBtn.hover(function(){
var index = $tabsBtn.index(this);
//alert(index);
$(this).addClass("current").siblings().removeClass("current");
$tabsCont.eq(index).show().siblings(".hot-news-tabs-cont").hide();
} ,function(){});
});