最近在项目开发中要用到tab切换效果 看了下jquery tab的效果仿照大概思路自己写了个
-----------------------css代码
ul,li{
margin:0px;
padding:0px;
/*去掉li的原点 */
list-style:none;
}
li{
/*横向显示*/
float:left;
padding:5px;
background-color:#868686;
color:white;
margin-right:2px;
border:1px solid white;
}
.tabIn{
background-color:#6E6E6E;
border:1px solid #6E6E6E;
}
div{
clear:left;
color:white;
width:300px;
height:200px;
background-color:#6E6E6E;
display:none;
padding:10px;
}
.divIn{
display:block;
}
----------------------------------js
$(
function(){
$("li[id^='tabLi_']").mouseover(function(){
$(".divIn").css("display","none");
$(".divIn").removeClass("divIn");
$(".tabIn").removeClass("tabIn");
var currentId=$(this).attr("id");
var id=currentId.replace("tabLi_","");
$("#divLi_"+id+"").addClass("divIn");
$("#divLi_"+id+"").css("display","block");
$(this).addClass("tabIn");
});
}
);
-----------------------------html代码
<ul id="tabRight">
<li class="tabIn" id="tabLi_1" ><a href="#">热门网游</a></li>
<li id="tabLi_2"><a href="#">ABCD</a></li>
<li id="tabLi_3"><a href="#">EFGH</a></li>
<li id="tabLi_4"><a href="#">EFGH4</a></li>
<li id="tabLi_5"><a href="#">EFGH5</a></li>
<li id="tabLi_6" class="lastitem"><a href="#">EFGH6</a></li>
</ul>
<div class="divIn" id="divLi_1">内容1</div>
<div id="divLi_2">内容2</div>
<div id="divLi_3">内容3</div>
<div id="divLi_4">内容4</div>
<div id="divLi_5">内容5</div>
<div id="divLi_6">内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6内容6</div>
分享到:
相关推荐
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
jquery+css Tab切换效果,可自定义切换效果
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件
jquery+css3 tab标签选项卡.zip
该资源利用jquery+CSS实现了简单的tab栏切换,可以参照学习,也可加以改进利用到项目中。
基于jQuery+CSS3实现超酷的动画Tab菜单效果源码.zip
一款基于jQuery+CSS3实现的响应式TAB选项卡样式幻灯片切换代码,选项卡切换大图幻灯片特效。
主要介绍了jQuery+css实现的tab切换标签,可兼容各浏览器,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下
一款蓝色风格的竖排手风琴tab选项卡jQuery+CSS3代码特效,鼠标点击tab带有梦幻气泡效果,滑动切换手风琴代码。
一个仿淘宝的tab卡选框 jquery+css
jQuery+CSS3制作简单的Tab选项卡.zip
一款非常精美的jQuery+css3图文布局手风琴滑动切换代码,图片结合文字内容介绍横向手风琴展示效果。
基于jQuery流畅的tab切换效果JS+CSS基于jQuery流畅的tab切换效果JS+CSS基于jQuery流畅的tab切换效果JS+CSS
jQuery+css弹性伸缩Tabs选项卡代码是一款根据容器的大小弹性伸缩,选项卡的样式可以实用CSS来自定义,选项卡带平滑拉伸动画效果。
前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难。回来后,再把思路理一理,写一个,基础还是很重要的。 最终要实现的效果图如下: (1)点击tab栏显示...
使用CSS+JQUERY 实现手机端网页的多TAB展示模式。
jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效.zip