以前的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. Android线程中设置控件

    在Android中经常出现多线程中设置控件的值报错的情况,今天教大家封装一个简单的类避免这样的问题,同样也调用实现也非常的方便. 自定义类: /** * Created by wade on 2016 ...

  2. PowerShell脚本自动设置安卓手机wifi代理

    在实际测试工作中,经常要将安卓手机通过wifi代理的形式连接到本机的fiddler或charles服务器代理进行抓包测试.最近一直在想,有没有什么方法可以自动设置安卓手机的wifi代理,曾经想通过修改 ...

  3. python中深复制与浅复制

    转载:http://blog.csdn.net/vicken520/article/details/8227524 java中也经常碰见这种问题.时间原因就不写java方面啦 Python深复制浅复制 ...

  4. c语言简易文法

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  5. Xcode 7免证书真机调试

    在Xcode 7中,苹果改变了自己在许可权限上的策略,此前Xcode只开放给注册开发者下载,但Xcode 7改变了这种惯有的做法,无需注册开发者账号,仅使用普通的Apple ID就能下载和上手体验.此 ...

  6. JFinal - 事务实现的原理

    使用声明式事务 事务类本身就是一个拦截器,可以用注解的方式配置.方法内部的所有 DML 操作都将在本次事务之内. 配置代码如下: @Before(Tx.class) public void saveP ...

  7. python 安装MySQLdb mysql_config not fount

    缺少 libmysqlclient-dev 应该是安装MySQL的锅. 资料:http://www.cnblogs.com/xiazh/archive/2012/12/12/2814289.html ...

  8. webpack和gulp的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

  9. MFC编程入门之二十一(常用控件:编辑框Edit Control)

    上一节讲了静态文本框,本节讲的是编辑框(Edit Control)同样是一种很常用的控件,我们可以在编辑框中输入并编辑文本.在前面加法计算器的例子中已经演示了编辑框的基本应用.下面具体讲解编辑框的使用 ...

  10. Android布局整理Relative/Linear

    1.RelativeLayout布局 android:layout_centerHorizontal 水平居中 android:layout_centerVertical 垂直居中 android:l ...