请选择 进入手机版 | 继续访问电脑版
利用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>

  21.         <div class="content">
  22.             <ul>
  23.                 <li>
  24.                     <a href="">自丢网</a>
  25.                 </li>
  26.                 <li>
  27.                     <a href="">关于我们</a>
  28.                 </li>
  29.                 <li>
  30.                     <a href="">产品中心</a>
  31.                 </li>
  32.                 <li>
  33.                     <a href="">新闻中心</a>
  34.                 </li>
  35.                 <li>
  36.                     <a href="">联系我们</a>
  37.                 </li>
  38.             </ul>
  39.         </div>
  40.     </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.             });

  8.         });
  9.     </script>
复制代码
推荐给好友: [复制链接]
推荐文章
回复

使用道具 举报

相关文章

发布主题
  • 今日更新:0 昨日更新:6
  • 会员总数:354 模板总数:8460
打造全国最大建站模板下载平台
手机/微信

13145201488

周一至周日9:00-23:00

如有侵权请联系我们

515138@qq.com 在线QQ咨询

微信扫码关注我们