深圳市金黑网络技术有限公司始终坚持以用户需求为导向，提供安全、稳定、高效的产品和服务！
签到 · 搜索导航 · 服务热线 · 微信/手机：17817817816

深圳网站建设

搜索
应用资源 › 应用开发教程 › 前端教程 › javascript教程 › 利用jquery制作简单tab选项卡切换效果案例代码教程 ...
返回列表 发新帖
查看: 341|回复: 0

利用jquery制作简单tab选项卡切换效果案例代码教程

[复制链接]
admin

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2023-1-30 09:47:26 | 341 | 0 | 显示全部楼层 |阅读模式
admin 2023-1-30 09:47:26 341 0 显示全部楼层
利用jquery制作简单tab选项卡切换效果案例代码教程

利用jquery制作简单tab切换效果案例代码教程
第一步：引入jQuery.js
第二步：css写入
第三步：html代码，如下
  1. <div class="zidiu">
  2.         <div class="nav">
  3.             <ul>
  4.                 <li class="cur">
  5.                     <a href="">金黑网络</a>
  6.                 </li>
  7.                 <li>
  8.                     <a href="">关于我们</a>
  9.                 </li>
  10.                 <li>
  11.                     <a href="">产品中心</a>
  12.                 </li>
  13.                 <li>
  14.                     <a href="">新闻中心</a>
  15.                 </li>
  16.                 <li>
  17.                     <a href="">联系我们</a>
  18.                 </li>
  19.             </ul>
  20.         </div>

  22.         <div class="content">
  23.             <ul>
  24.                 <li>
  25.                     <a href="">金黑网络</a>
  26.                 </li>
  27.                 <li>
  28.                     <a href="">关于我们</a>
  29.                 </li>
  30.                 <li>
  31.                     <a href="">产品中心</a>
  32.                 </li>
  33.                 <li>
  34.                     <a href="">新闻中心</a>
  35.                 </li>
  36.                 <li>
  37.                     <a href="">联系我们</a>
  38.                 </li>
  39.             </ul>
  40.         </div>
  41.     </div>
复制代码
JS代码（重点）：

  1. <script>
  2.         $(function() {
  3.             $('.nav ul li').mouseover(function() {
  4.                 $(this).addClass('cur').siblings().removeClass('cur');
  5.                 var index = $(this).index();
  6.                 $('.content ul li').eq(index).show().siblings().hide();
  7.             });

  9.         });
  10.     </script>
复制代码
javascript教程, 选项卡制作, jquery案例
楼主热帖

相关帖子
回复

举报

返回列表 发新帖
Copyright © 2013-2023 深圳市金黑网络技术有限公司 版权所有    备案号：粤ICP备2021124338号    粤公网安备 44030702003689号

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表