用ul 和 div 配合实现tab 页

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <title>Tab页</title>

 6         <style>

 7             li{

 8                 list-style: none;

 9                 float: left;

10                 width: 60px;

11                 height: 30px;

12                 background: #5F9EA0;

13                 border: 2px solid white;

14                 text-align: center;

15             }

16             .tabdiv{

17                 width: 500px;

18                 height: 300px;

19                 background: #5F9EA0;

20             }

21         </style>

22         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>

23         <script>

24             $(function(){

25                 //页面加载时，默认第一个标签页与第一个div相连

26                 $("li:first").css("border-bottom","4px solid #5F9EA0");

27                 //单击标签事件

28                 $("li").click(function(){

29                     //清除底边展示

30                     $("li").each(function(){

31                         $(this).css("border-bottom","");

32                     });

33                     $(this).css("border-bottom","4px solid #5F9EA0");

34                     //所有div隐藏

35                     $(".tabdiv").each(function(){

36                         $(this).hide();

37                     });

38                     //与其关联的div显示

39                     $("#"+$(this).attr("tab")).show();

40                 })

41

42             })

43         </script>

44     </head>

45     <body>

46         <ul>

47             <li tab="div1">标签一</li>

48             <li tab="div2">标签二</li>

49             <li tab="div3">标签三</li>

50         </ul>

51         <div id="div0" style="clear: both;"></div>

52         <div class="tabdiv" id="div1" >div1内容</div>

53         <div class="tabdiv" id="div2" style="display: none;">div2内容</div>

54         <div class="tabdiv" id="div3" style="display: none;">div3内容</div>

55     </body>

56 </html>

JQuery实现tab页的更多相关文章

  1. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  2. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  3. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  5. jquery validate 之多tab页同时校验问题

    1.设置多tab页同时校验: $("form").validate({ignore: ":hidden", ignore: ""}); 由于 ...

  6. JQuery动态添加多个tab页标签

    jQuery是一个兼容多浏览器的js库,核心理念是write less,do more(写的更少,做的更多),jQuery使用户能更方便地处理HTML documents.events.实现动画效果, ...

  7. Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    基于Bootstrap和JQuery实现动态打开和关闭tab页   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-d ...

  8. jquery easyui 中tab页添加其他页面，href与content的用法与区别

    //tab页增加 function addPanel(name,url){ var dd = $('#tt').tabs('exists',name); if(dd){ $('#tt').tabs(' ...

  9. JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

    前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...

随机推荐

  1. 精讲响应式WebClient第6篇-请求失败自动重试机制，强烈建议你看一看

    本文是精讲响应式WebClient第6篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方 ...

  2. .net core 3.0 web api 重点设置,主要为了解决axios post不到参数问题

    这两天研究.net core 3.0升级,前端vue+axios 后端web api.测试过程中发现post的时候,由于提交的是json对象,后端web api获取不到数据. 今天贴了下解决过程.主要 ...

  3. 夜息seo培训内部教程

    http://www.wocaoseo.com/thread-268-1-1.html 随着SEO日益正规化,在企业中推行SEO变得越来越重要,在上一文<将SEO整合入整个网站项目>中也有 ...

  4. 基于.NetCore3.1系列 —— 日志记录之初识Serilog

    一.前言 对内置日志系统的整体实现进行了介绍之后,可以通过使用内置记录器来实现日志的输出路径.而在实际项目开发中,使用第三方日志框架(如: Log4Net.NLog.Loggr.Serilog.Sen ...

  5. 位运算处理字符大小写转换 - 关联Leetcode 709. 转成小写字母

    大写变小写.小写变大写 : 字符 ^= 32; 大写变小写.小写变小写 : 字符 |= 32; 小写变大写.大写变大写 : 字符 &= -33; 题目 实现函数 ToLowerCase(),该 ...

  6. python安装wordcloud库报错

    pip install wordcloud 安装成了这样 红彤彤的一片 解决方法 https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud 下载对应版 ...

  7. Istio安全-授权(实操三)

    Istio安全-授权 目录 Istio安全-授权 授权HTTP流量 为使用HTTP流量的负载配置访问控制 卸载 授权TCP流量 部署 配置TCP负载的访问控制 卸载 使用JWT进行授权 部署 使用有效 ...

  8. 使用 Visual Studio 2019 批量添加代码文件头

    应用场景介绍 在我们使用一些开源项目时,基本上都会在每个源代码文件的头部看到一段版权声明.一个项目或解决方案中源代码文件的个数少则几十,多则几千甚至更多,那么怎么才能给这么多文件方便地批量添加或者修改 ...

  9. Android开发之去掉listview的点击效果，一行代码间接粗暴，解决你的问题。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 Android开发之去掉listview的点击效果,一行代码间接粗暴,解决你的问题. 当你在用list ...

  10. Spine学习六 - 碰撞检测

    相信在使用Spine做游戏的时候,肯定会遇到这样的需求: 一个人物有一把大刀,要使用这把大刀去砍怪,伤害检测以这把大刀砍刀怪物为准,那么要怎么在一个看上去就是一体的Spine Object上绑定一个碰 ...