首页 > 代码库 > jquery实现的tab选项卡
jquery实现的tab选项卡
作为网页的基本常见特效,我今天趁着中午下班,赶紧试一下,没想到简单的实现了,
不过本来就是入门级的东西,就当打怪升级吧!
效果如图:
html:
<ul class="nav"> <li class="on">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> <li>选项卡4</li> </ul> <ul class="con"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
css:
ul,li{ margin: 0; padding: 0; } li{ float: left; list-style: none; text-align: center; } .nav{ width: 400px; height: 50px; } .nav li{ width: 100px; height: 50px; line-height: 50px; } .on{ background-color:red; } .con{ width: 400px; height: 300px; border: 1px solid black; position: relative; } .con li{ width: 400px; height: 300px; line-height: 300px; font-size: 50px; position: absolute; /**************不写left和top值默认为0***************/ display: none; } .con li.active{ display: block; }
jquery:
$(function(){ $(".nav li").mouseover(function(){ $(this).addClass("on").siblings().removeClass("on"); var index= $(this).index(); $(".con li").eq(index).addClass("active").siblings().removeClass("active"); }) })
jquery实现的tab选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。