兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)皆为提供免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需充值兔币购买会员组方可下载),用户仅需手动前往【申请下载权限】申请用户组下载权限即可,如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

实现网站栏目或导航切换按钮相关代码及CSS

[复制链接]
tuyuanma 发表于 2016-9-5 09:37:48 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


演示效果: 1.png
. n* s, b& `/ f4 Y源码部分:
  1.   <div class="video-content clearfix">
    / ?! o; r3 f! V& {5 C
  2. <div class="video-wrap">
    0 p, c6 [/ R* H! e9 y# t+ f1 D; t3 ^
  3. <div class="video-tab">: R( V/ ]( u) |/ n1 W& D- I, H
  4. <a href="/forum-74-1.html">, p5 ?9 t8 F+ b
  5.    全部, j  M" ^# k7 c. R
  6. </a>
    9 f0 f0 ]4 Z3 F; U  m
  7. <a href="javascript:void();"   class="cur a_menu" id="a_news">
    $ X8 t6 P5 w% w( X/ O5 R( B; c
  8. 新闻资讯
    : N0 X# h8 X1 K. Q# [
  9. </a>& _+ q( j& [5 G* D1 `" U
  10.   <a href="javascript:void();"   class="a_menu" id="a_game">
    ; r9 Z9 ?) c7 \- @6 y( A3 c
  11. 最新游戏
    & y- v2 J& u! C% B/ T) d% q  j
  12. </a>4 q/ o1 Y$ K  X6 ?* W
  13. </div>
    ( g5 G) |8 I9 o0 n* ^
  14. </div>
      L1 ]9 d! P* e
  15.   </div>
复制代码
CSS部分:
  1. .video-content {width: 1170px;margin: 0 auto 80px;position: relative;}5 g% Z, P4 ?$ e& V
  2. .clearfix {height: auto;overflow: hidden;zoom: 1;}
    - G# Q3 D* x0 E. X# n9 _
  3. .video-wrap {float: left;width: 850px;}" i+ R/ `# s/ A# Y9 O5 c- ?9 N% z
  4. .video-tab {font-size: 0;height: 40px;background-color: #fff;margin-bottom: 20px;}
    0 _; I+ E/ |, |# Z+ n( }
  5. .video-tab a {display: inline-block;width: 120px;height: 40px;font-size: 14px;line-height: 40px;color: #545454;text-align: center;}
    + I: G# G! R$ ]
  6. .video-tab .cur {color: #fff;background-color: #325096;}
复制代码
jQuery部分:
  1.   <script type="text/javascript">  3 M5 M4 h' t3 ^3 N) j; f+ ?
  2.      jQuery(document).ready(function () {     
    . E( l) k+ w% R% t" |
  3.      jQuery('#a_news').click(function () {
    . X4 e7 j+ j6 h% _$ f9 ~
  4. jQuery(this).removeClass("cur");- E- r6 F2 b- |5 E5 [. B: }
  5.      jQuery(this).addClass("cur");
    $ p) K# m' M, A
  6.      jQuery("#a_game").removeClass("cur");       . X( w5 A4 `: \. I
  7.        jQuery("#content_div_news").show();
    ' P; q" ?; h7 W4 k7 C0 G" i  u
  8.        jQuery("#content_div_games").hide();
    : O- j& g$ ^7 f# a$ a
  9.     });
      I9 g: V. k; M* q0 t
  10.      jQuery('#a_game').click(function () {
    : f7 V/ @8 I" U- F
  11.       jQuery(this).removeClass("cur");/ h2 C' f4 P  U, c$ O
  12.      jQuery(this).addClass("cur");
    - P( U7 s  c4 H" f* W
  13.      jQuery("#a_news").removeClass("cur");
    9 _; P1 @: k8 }
  14.        jQuery("#content_div_news").hide();0 P# ^2 q/ r4 w- [( C2 u% w
  15.        jQuery("#content_div_games").show();; a- A( P- X% G( [$ }
  16.     });& J* z/ H) D( \
  17.      jQuery('.v-ranking li').mouseover(function () {( U1 m/ S; \; d
  18.         var jqthis = jQuery(this);9 f1 I1 i# I$ v; C. }5 a% F5 e
  19.        jqthis.find('.v-rLink').addClass('v-rLinkb');
    " ^0 W; P' B, d" W& C. c
  20.         jqthis.find('.v-rImg').show();/ Y* C! G$ m. @- |
  21.         jqthis.siblings('li').find('.v-rLink').removeClass('v-rLinkb');  D: L: D" c$ k
  22.        jqthis.siblings('li').find('.v-rImg').hide();8 r3 l0 m! I- G! H( s
  23.     });" |, h2 Z; _8 g! ]& m. F6 J
  24.          });4 R$ X+ b% ]" U6 k
  25.     </script>
复制代码
注明:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。9 h8 g4 h! }; Z1 V4 P: i& h
0 L5 g/ g& A1 ^* j% D
具体jQuery详解,可查看:jQuery事件之鼠标事件,属性说明' L1 N) r+ B/ `3 x% U

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-7-19 12:09
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

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