零基础建站教程介绍

当前位置:

简单易用jquery实现tab栏标签切换菜单代码

一些网站的栏目比较多,例如在制作门户网站时,如果想在一个页面上显示更多的内容又不增加页面篇幅,最有效的方法就是使用tab标签切换来显示。效果如下图:
tab栏标签切换

怎么在自己做网站时,做出这样的效果呢?按照下面的步骤操作就可以。

方法/步骤

  1. 下载tab栏标签切换必需的JS文件。下载地址:https://pan.baidu.com/s/1boHle7H
    1
  2. 将下载下来的JS文件上传到自己网站空间的根目录;(如果不知道什么是网站根目录,可以先学习一下网站建设入门
  3. 在网页中需要显示TAB菜单的位置,粘贴以下的代码,里面的域名要改成自己的网站域名。里面的文字内容已换成你自己网站的地址和链接,或者是动态调用代码。
    <!--# 选项卡 -->
    <div class="table_card">
    <ul class="tab">
    <li class="activ">最新</li>
    <li>热门</li>
    <li>新闻</li>
    </ul>
    <div class="tabCon">
    <div class="on">
    <ul class="newslist01">
    <li><a href="#"><span>【前端】</span>iframe实现关闭当前窗口效果<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【前端】</span>div透明边框的设置及ie兼容<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【福利】</span>你是我的好朋友,我要送你个天猫红包<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【活动】</span>蚂蚁金服开放平台合作伙伴大会(北京8.10)<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>融云即时通讯云-豆果美食、Faceu等亿级APP都在用<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    </ul>
    </div>
    <div>
    <ul class="newslist01">
    <li><a href="#"><span>【前端】</span>OpenBSD 6.0将移除Linux子系统以改进安全<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【前端】</span>Facebook计划在旧金山设立首个办公室<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【福利】</span>雅虎也“死”了 互联网到了谈论基业长青的年代<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【活动】</span>乐视回应“1分钱买会员后自动续费”:将赠送一年会员<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>高德开放平台发布AMAP Inside战略 服务神州租车等30万移动应用<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    </ul>
    </div>
    <div>
    <ul class="newslist01">
    <li><a href="#"><span>【前端】</span>可是姑娘,你为什么要编程呢?<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【前端】</span>知其所以然(以算法学习为例)<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【福利】</span>如何给变量取个简短且无歧义的名字<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【活动】</span>写给初学前端工程师的一封信<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>融云即时通讯云-豆果美食、Faceu等亿级APP都在用<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    <li><a href="#"><span>【推荐】</span>50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库<span class="ding">【置顶】</span></a><span class="time">2016-07-17</span></li>
    </ul>
    </div>
    </div>
    </div>
    <!--#@ 选项卡 -->
    <script src="你的网站域名/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    $(".tab li").click(function(){
    $(".tab li").eq($(this).index()).addClass("activ").siblings().removeClass("activ");
    $(".tabCon div").hide().eq($(this).index()).show();
    })
    });
    </script>
  4. 将以下的CSS代码粘贴 到自己网站的CSS文件内。
    .table_card { width:720px; margin:0 auto;margin-top: 20px}
    .table_card .tab { height:37px; font-size:14px; border-bottom:1px #e1e1e1 solid}
    .table_card .tab li { float:left; height:36px; line-height:36px; padding:0 25px; margin-right:5px; background:#f0f0f0; border-top:1px #e1e1e1 solid; border-left:1px #e1e1e1 solid; border-right:1px #e1e1e1 solid;}
    .table_card .tab li:hover { height:37px; background:#fff; color:#333; cursor:pointer}
    .table_card .activ { height:37px !important; background:#fff !important; color:#333}
    .table_card .tabCon { background:#fff; padding:15px; border-bottom:1px #e1e1e1 solid; border-left:1px #e1e1e1 solid; border-right:1px #e1e1e1 solid;}
    .table_card .tabCon div { display:none}
    .table_card .tabCon .on { display:block}.newslist01 { font-size:14px; }
    .newslist01 li { line-height:36px;}
    .newslist01 li .ding { color:#F30; margin-left:5px}
    .newslist01 li .time { float:right; font-size:12px; color:#888}
  5. 这样基本上就大功告成了,剩下的就是结合自己网站的样式去调一下CSS了,达到自己网站的要求。

发表评论

零基础学建站就到学做网站论坛