『签 到』 开启辅助访问
 找回密码
 立即注册

扫一扫,访问微社区

只需一步,快速开始

QQ登录

只需要一步,快速开始

或者

[Javascrip] 一个tab切换标签页的精简源码

0 48
风起云甬 发表于 2020-3-23 17:55:45 |阅读模式 |复制链接
1.新建html页
2.复制以下源码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>tab标签页</title>
  6. <script type="text/javascript" src="js/jquery.min.1.9.1.js"></script>
  7. <style type="text/css">
  8. .tab_head{
  9.         border-bottom: 1px solid blue;
  10.         width: 512px;
  11.         margin-left: 40px;
  12.         height: 32px;
  13. }
  14. li{
  15.         float: left;
  16.         list-style: none;
  17.         width: 100px;
  18.         height: 30px;
  19.         text-align: center;
  20.         line-height: 30px;
  21.         font-size: 26px;
  22.         margin-right: 2px;
  23.         color: #fff;
  24.         background-color: #1979CA;
  25.         cursor: pointer;
  26. }
  27. .active{
  28.         background-color: #fff;
  29.         color: black;
  30.         border-top: 3px solid blue;
  31.         border-right: 1px solid blue;
  32.         border-left: 1px solid blue;
  33. }
  34. .init{
  35.         clear: both;
  36.         width: 500px;
  37.         height: 200px;
  38.         display: none;
  39.         border: 1px solid blue;
  40.         border-top: none;
  41.         font-size: 20px;
  42.         margin-left: 40px;
  43.         padding: 5px;
  44. }
  45. .show{
  46.         display: block;
  47. }
  48. </style>
  49. </head>
  50. <body>
  51.         <div class="tab_head">
  52.                 <ul>
  53.                         <li id="tab1" data-season="1" class="active">春天</li>
  54.                         <li id="tab2" data-season="2">夏天</li>
  55.                         <li id="tab3" data-season="3">秋天</li>
  56.                         <li id="tab4" data-season="4">冬天</li>
  57.                 </ul>
  58.         </div>
  59.         <div class="tab_content">
  60.                 <div id="content_1" class="init show">春天的雨是柔和的,只见春雨在竹枝、竹叶上跳动着。那雨时而直线滑落,时而随风飘洒,
  61.                 留下如烟、如雾、如纱、如丝的倩影,飞溅的雨花仿佛是琴铉上跳动的音符,奏出优美的旋律。</div>
  62.                 <div id="content_2" class="init">小鸟不知躲匿到什么地方去了;草木都垂头丧气,像是奄奄等毙;只有那知了,不住地在枝头发出破碎
  63.                 的高叫;真是破锣碎鼓在替烈日呐喊助威!</div>
  64.                 <div id="content_3" class="init">秋天的风,秋天的叶,秋天的色调,秋天的阳光,构成了一幅绝妙的秋景图。图画中埋藏了许许多多的秘密,
  65.                 只要我们善于发现,就可以揭开;图画中蕴藏了许许多多的人生哲理,只要我们积极求索,就可以领悟。
  66.                 图画中展现了许许多多多姿的人生,只要我们端正态度,就可以拥有。</div>
  67.                 <div id="content_4" class="init">阳光给人们的一种感觉是温暖的,冬日的阳光也不例外,它给人们的第一种感觉是温暖,在寒冷的冬天里,
  68.                 早晨太阳升了起来,把金色的光辉洒在大地上,大地妈妈苏醒了,不再那么寒冷。</div>
  69.         </div>
  70. </body>
  71. <script type="text/javascript">
  72.         $(function(){
  73.                 $("#tab1,#tab2,#tab3,#tab4").click(function() {
  74.                         //获取标签页代号
  75.                         var num = $.trim($(this).attr("data-season"));
  76.                         //删除兄弟元素的 active 类样式
  77.                         $("#tab"+num).siblings().removeClass("active");
  78.                         $("#tab"+num).addClass("active");
  79.                         $("#content_"+num).siblings().removeClass("show");
  80.                         $("#content_"+num).addClass("show");
  81.                 });
  82.         })
  83. </script>
  84. </html>
复制代码
3.按路径引入:js/jquery.min.1.9.1.js
4.效果如下:
一个tab切换标签页的精简源码,慧之家


精简源码,使用性很强!
您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

发布资源 快速回复 站点服务大厅 搜索 官方群