首页 > 代码库 > 选项卡实现
选项卡实现
实现效果：
JQ简单选项卡实现，实现原理：当点击选项卡栏目时为当前栏目添加一个class，然后通过index()获得其为第几个栏目，然后通过eq()选择对应的内容显示。
布局代码：
<style>.tab{width: 245px;height: 160px;} .tab .tab_menu{width: 100%;height: 30px;border-bottom: 1px solid #ccc;text-align: left;} .tab .tab_menu li{width: 100px;height: 30px;line-height: 30px;text-align: center;float:left;background-color: #eee;margin-right: 2px;} .tab .tab_menu li:hover{cursor: pointer;*cursor: hand;background-color: #ddd;} .tab .tab_menu li.current{background-color: #1e8cd2;color: #fff;} .tab .tab_content{width: 100%;height: 129px;position: relative;overflow: hidden;} .tab .tab_content>div{width: 94%;height: 119px;display: block;padding: 5px 3%;position: absolute;left: 0;top:0;display: none;} .tab .tab_content>div li{width: 100%;line-height: 28px;height: 28px;overflow: hidden;display: inline-block;*display: inline;*zoom:1;} .tab .tab_content>div li a{width: 100%;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;display: block;font-size: 12px;color: #000;text-decoration: none;} .tab .tab_content>div li a:hover{color: #1e8cd2;text-decoration: underline;}</style><div class="tab">
<!--栏目--> <div class="tab_menu"> <ul> <li>栏目1</li> <li>栏目2</li> </ul> </div>
<!--内容--> <div class="tab_content"> <div class="tab_container"> <ul> <li> <a href=http://www.mamicode.com/"">a</a> </li> <li> <a href=http://www.mamicode.com/"">b</a> </li> </ul> </div> <div class="tab_container"> <ul> <li> <a href=http://www.mamicode.com/"">1</a> </li> <li> <a href=http://www.mamicode.com/"">2</a> </li> </ul> </div> </div></div>
JQ实现：
$(‘.tab_menu>ul>li:first‘).addClass(‘current‘);var tabNum = $(‘.tab_menu>ul>li‘).index($(‘.tab_menu>ul>li.current‘));$(‘.tab_content .tab_container‘).eq(tabNum).show();$(‘.tab_menu>ul>li‘).click(function(){ var tabNumOld = $(‘.tab_menu>ul>li‘).index($(‘.tab_menu>ul>li.current‘)); var tabNumHover = $(‘.tab_menu>ul>li‘).index(this); if(tabNumOld == tabNumHover){ return false; } $(‘.tab_menu>ul>li‘).finish().removeClass(‘current‘).eq(tabNumHover).addClass(‘current‘); $(‘.tab_content .tab_container‘).finish().hide().eq(tabNumHover).show();})
选项卡实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。