tab切换-2016.6.4
2024-10-09 19:13:25
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现。 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个。
效果展示(没有美化):
即当鼠标点击头部上面菜单时,底下相对应的div出现。
HTML:
<div class="div-tab">
<ul class="div-tab-head">
<li class="head-on">周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>星期六</li>
<li>星期天</li>
</ul>
<!--周一-->
<div class="week week-on">
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
<a href="#">语文</a>
</div>
<!--周二-->
<div class="week">
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
<a href="#">数学</a>
</div>
<!--周三-->
<div class="week">
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
<a href="#">英语</a>
</div>
<!--周四-->
<div class="week">
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
<a href="#">地理</a>
</div>
<!--周五-->
<div class="week">
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
<a href="#">化学</a>
</div>
<!--星期六-->
<div class="week">
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
<a href="#">生物</a>
</div>
<!--星期天-->
<div class="week">
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
<a href="#">信息技术</a>
</div>
</div>
CSS:
/*tab切换*/
.div-tab{ width: 100%; height: auto; background-color: #6ED1EF; overflow: hidden;}
.div-tab-head{ width: 100%; height: auto; overflow: hidden; background-color: #58C0E0;}
.div-tab-head>li{ width: 13.9%; text-align: center; padding: 1rem 0; float: left; font-size: 1.5rem; color: #000; font-weight: bold;}
.div-tab-head>li:nth-child(1){ margin-left: 2px;}
.week{ display: none; width: 100%;}
.week>a{ padding: 1rem; margin: 0.5rem; display: inline-block;}
.head-on,.week-on{ background-color: #fff;}
.week-on{ display: block;}
JQ:
<script type="text/javascript">
$(".div-tab-head>li").click( function(){
var index=$(this).index();
$(this).addClass("head-on").siblings().removeClass("head-on");
$(".week").addClass("week-on").eq(index).siblings(".week").removeClass("week-on");
});
</script>
最新文章
- Word中一些问题解决
- mysql删除重复记录,保存Id最小的一条
- Linux初学 - 解决chkconfig Segmentation fault(core dumped)
- JavaScript可否多线程? 深入理解JavaScript定时机制
- Windows Phone开发(12):认识一下独具个性的磁贴(转)
- 2015 偶数求和 AC 杭电
- QNX---Interrupt vector numbers(原创!!!)
- C 语言学习准备
- 优化设计提高sql类数据库的性能
- python基础-函数(9)
- SqlServer执行Insert命令同时判断目标表中是否存在目标数据
- LODOP打印css样式rgba显示黑色区块
- Windows 10 配置系统环境变量
- linux driver ------ platform模型,驱动开发分析
- pygame-KidsCanCode系列jumpy-part6-主角挂掉重新开始
- spring 事务注解
- nginx的安装应用
- 【mysql】一个很小但很影响速度的地方
- 014 view-controller标签
- exec和sp_executesql