以前的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>

tab切换-2016.6.4的更多相关文章

  1. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. jQuery的DOM操作实例(1)——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  3. jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据

    今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...

  4. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  5. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

  8. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  9. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

随机推荐

  1. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  2. input标签file的value属性IE兼容性问题

    在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...

  3. 我的git与github学习历程

    因为想要知道如何把代码放到github上,所以就百度了一下,然后找到一个<如何从github上面拷贝源码>的文章,就先进行练习了下   1.首先到git官网下载git版本控制工具的安装包, ...

  4. 【前端】我的Gulp配置

    2. gulp + browserify /** * File Name: gulpfile.js */ // 引入 gulp var gulp = require('gulp'); // 引入组件 ...

  5. ubuntu 14.04 vsftpd安装问题

    sudo apt-get install vsftpd; 打开允许访问用户名 local_enable=YES write_enable=YES chroot_list_file=/etc/vsftp ...

  6. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  7. CentOS 7 程序自启动的问题

    Mysql具体的安装方法见http://www.cnblogs.com/yoyotl/p/5752437.html 但是关于自启动部分需要多一些说明. 一.问题现象: 系统重启后,发现mysqld服务 ...

  8. IE11 iframe alternative

    <OBJECT classid=clsid:8856F961-340A-11D0-A96B-00C04FD705A2> <PARAM NAME=Location VALUE=http ...

  9. Java开发中经典的小实例-(输入三个数字判断三角形类型)

    import java.util.Scanner;public class threeTest {    public static void main(String[] args) {       ...

  10. Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    错误提示: 原因: MIME类型错误. 之前添加json.woff.woff2映射,更换系统(Win7升Win10)后配置失效,在webconfig中删除映射即可,因为Win10自带上面3个MIME映 ...