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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

【原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的简易版网址导航

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

DZ站长建站交流群:493651246

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


演示地址:http://hao.p2p110.com/ ( b: k: g- e& O
(文末配置演示图)
8 ?7 i; ?+ F, G( ?% w+ L

$ y* {6 j: I# {9 e4 _( p7 |8 B# X制作方式:4 D6 U6 ]( D7 [( Q
1、将template/default/portal/portal_topic_content.htm文件复制到template/当前模板/portal/portal_topic_content.htm,并重命名portal_topic_*****.htm,*****为需要命名的新名字(必须是英文状态,如portal_topic_daohang.htm8 J) K; o) H( S0 j: q
2、登入网站后台,门户——专题管理——创建专题
* n: r- p; m' L% q9 y3、输入专题名称——静态化名称(必须是英文状态,如daohang)——设置二级域名(可不设置)——SEO描述——SEO关键字——模板名(这里选择刚重命名的新文件portal_topic_daohang.htm)——提交# ^7 t9 ^9 w- u, ?* t: R. j) ^
4、删除文件中默认代码段,需删除代码如下:
  1. <!--[diy=diypage]-->. W; d6 N8 a% ?7 I+ M% ~: C
  2. <div id="diypage" class="area">6 p$ _' O+ g9 n, p* v7 L' ]
  3.         <div id="frame1" class="frame move-span frame-1 cl">& D" e; c5 D3 [  N" @5 ^( o* {  }1 X
  4.                 <div class="frame-title title" id="frame1"><span class="titletext">{lang frame}</span></div>
    % x  c: g* l, A$ c- E. r$ l; q
  5.                 <div id="frame1_left" class="column frame-1-c"></div>1 m6 l" O1 X" \8 C
  6.         </div>8 M; c* v) A* }: p# d
  7. </div>
    5 C; a# n- _" d3 u; n5 `: |
  8. <!--[/diy]-->
复制代码
5、将如下PHP代码复制到刚刚删除的代码位置,保存。
. {5 A2 p' R7 b6、刷新专题页面,导入DIY文件,DIY文件如下:
* t- l4 G  c9 M! _
游客,如果您要查看本帖隐藏内容请回复

, v. H. t) l  l9 D# sPHP代码如下:
  1. <div class="daohang728">
    . W  {/ a- [3 L+ y% e0 d0 n6 f5 |
  2.     <div class="daohang7281">
    ' t/ q7 @- k! R# {$ c' C7 W" P
  3.         <div class="daohang">
    & n- v% S: `& e
  4.             <a href="javascript:void();" class="a_menu cur">全部</a>, l! S( \! @1 J0 I! T1 N6 R
  5.             <a href="javascript:void();" class="a_menu">北京</a>9 M6 t$ ^' y! \/ u2 h* N
  6.             <a href="javascript:void();" class="a_menu">上海</a>/ F8 w6 `* h8 i
  7.             <a href="javascript:void();" class="a_menu">浙江</a>* u+ ^4 X7 n1 v& b( ]: w
  8.             <a href="javascript:void();" class="a_menu">广东</a>
    $ w3 J# U2 f# P  |* [* W& J" [& w
  9.             <a href="javascript:void();" class="a_menu">天津</a>) V2 i+ P( }3 }" B% ^# R" c
  10.             <a href="javascript:void();" class="a_menu">四川</a>! s6 H" O# T1 B: v2 k, f
  11.             <a href="javascript:void();" class="a_menu">江苏</a>8 E, {. p8 R4 {3 p; H: Z
  12.             <a href="javascript:void();" class="a_menu">山东</a>
    ' Z- ~4 Z: B7 H  Z( z
  13.             <a href="javascript:void();" class="a_menu">福建</a>
    3 V* X' K$ g4 |6 F; z
  14.             <a href="javascript:void();" class="a_menu">河南</a>
    / c1 i: S( V2 v. h8 L
  15.             <a href="javascript:void();" class="a_menu">河北</a>/ s3 B1 {- I% f
  16.             <a href="javascript:void();" class="a_menu">湖南</a>8 G  @* D% y+ G( A1 A7 B
  17.             <a href="javascript:void();" class="a_menu">湖北</a>
    % P' w( d4 d4 ^: T9 R
  18.             <a href="javascript:void();" class="a_menu">安徽</a>5 r7 t: a' O2 y) P* J  Q
  19.             <a href="javascript:void();" class="a_menu">江西</a>- R- v" N; ?8 G8 k8 L
  20.             <a href="javascript:void();" class="a_menu">辽宁</a>
    ) |& m4 c# H# m2 p
  21.             <a href="javascript:void();" class="a_menu">吉林</a>
    ) s" n' T$ _1 |7 {& P
  22.             <a href="javascript:void();" class="a_menu">黑龙江</a>            
    3 c- ]: V, u. z5 ]0 R  s
  23.             <a href="javascript:void();" class="a_menu">陕西</a>
    , z( w) \3 p, B9 W% j3 _, _# z
  24.             <a href="javascript:void();" class="a_menu">内蒙古</a>
    # X2 @5 {7 e" Z- P' m
  25.             <a href="javascript:void();" class="a_menu">山西</a>9 S$ E" d& N, m* H( E. s
  26.             <a href="javascript:void();" class="a_menu">宁夏</a>8 k$ L1 F+ u# A6 L( C
  27.             <a href="javascript:void();" class="a_menu">甘肃</a>
    9 a0 _& y0 z& k4 a+ G/ U
  28.             <a href="javascript:void();" class="a_menu">青海</a>  m7 I2 [  X8 ]' g7 S: U/ Z! K* X
  29.             <a href="javascript:void();" class="a_menu">重庆</a># w' s, }3 k4 @# B& _
  30.             <a href="javascript:void();" class="a_menu">贵州</a>
    0 Q, L9 m7 f' l9 |* k/ h
  31.             <a href="javascript:void();" class="a_menu">广西</a>
    ' |6 H; E1 A& X0 g. Y; Z
  32.             <a href="javascript:void();" class="a_menu">云南</a>. m" }; s5 H6 Y" }5 Z2 g
  33.             <a href="javascript:void();" class="a_menu">西藏</a>
    # P# G9 M4 e0 A7 W' c0 o
  34.             <a href="javascript:void();" class="a_menu">新疆</a>
    $ \' g% `; ?( C+ ]& `: f
  35.             <a href="javascript:void();" class="a_menu">海南</a>, F; S2 d: w  U5 W
  36.         </div>
    3 \2 L* S6 p. r. d; Z
  37.         <div class="lp_content1">  [, _7 ^+ Z- H8 W0 l% \4 N
  38.             <div class="lp_content1_c" style="display: block;">5 L; r3 E9 _+ j: Y  `' i; B4 V
  39.                 <!--[diy=quanbu]--><div id="quanbu" class="area"></div><!--[/diy]-->
    / d5 I2 A6 |! t: [# Y/ c' ^
  40.             </div>
    + G" a4 H: f7 k/ H$ Y; \3 ^
  41.             <div class="lp_content1_c" style="display: none;">
    ( ]0 X* E2 K! X) w
  42.                 <!--[diy=beijing]--><div id="beijing" class="area"></div><!--[/diy]-->
    3 V7 e$ S6 a, [; J* G+ R+ _
  43.             </div>
    + W% U  `5 }  T+ j# r( X
  44.             <div class="lp_content1_c" style="display: none;">
    # u; g/ m, V1 w2 O  K
  45.                 <!--[diy=shanghai]--><div id="shanghai" class="area"></div><!--[/diy]-->
    " l3 I  L% q0 B) U; X) F
  46.             </div>
    3 t& ~! k: w7 w2 w# S/ ?
  47.             <div class="lp_content1_c" style="display: none;">; \# v; D1 r- Z% U: i
  48.                 <!--[diy=zhejiang]--><div id="zhejiang" class="area"></div><!--[/diy]--> * g) a9 I$ \$ ~/ @
  49.             </div>
    # T: o' I0 Z* V& A2 {$ n3 i
  50.             <div class="lp_content1_c" style="display: none;">! H& l: K% z" t- f8 V- f6 X
  51.                 <!--[diy=guangdong]--><div id="guangdong" class="area"></div><!--[/diy]--> - y# E- O! V4 }+ O& Y* m( Q( t# ^
  52.             </div>1 Y/ s7 C: X2 V+ C9 A; f5 @3 o
  53.             <div class="lp_content1_c" style="display: none;">
      ]+ M4 w% k) D: c. z- M
  54.                 <!--[diy=tianjin]--><div id="tianjin" class="area"></div><!--[/diy]-->
    # n+ R- u4 R/ b9 ]1 \7 v3 A
  55.             </div>
      n: H' H+ I* ?% {/ D& C( @
  56.             <div class="lp_content1_c" style="display: none;">0 ?0 X  c& q8 ]( W- _3 E4 s# F
  57.                 <!--[diy=sichuan]--><div id="sichuan" class="area"></div><!--[/diy]--> 4 ]$ p2 W# L3 ]9 I. H* D/ \5 ?9 B
  58.             </div>
    7 e3 b7 h; e" Z* F; }
  59.             <div class="lp_content1_c" style="display: none;">
    2 o6 b$ w. M/ h# E+ Z% R
  60.                 <!--[diy=jiangsu]--><div id="jiangsu" class="area"></div><!--[/diy]-->
    , n3 ]: P- t* \: ^& Q4 ?7 `: h
  61.             </div>
    . v7 C6 |1 p- I5 j
  62.             <div class="lp_content1_c" style="display: none;">& P. p4 V/ a' s2 A- b. x2 K9 ]* z. J' A  Q
  63.                 <!--[diy=shandong]--><div id="shandong" class="area"></div><!--[/diy]-->
    / W: \8 C7 u# ^0 A0 \0 Q! N
  64.             </div>
    & _7 ~$ w! J0 b7 {+ m4 v5 u  ^9 q
  65.             <div class="lp_content1_c" style="display: none;">
    + U- j5 V1 N+ U: x$ r
  66.                 <!--[diy=fujian]--><div id="fujian" class="area"></div><!--[/diy]-->
    ' Q' K. w& F0 i) e. l; h
  67.             </div>
    7 C: c" ]+ Y: C+ D/ w' ~/ s2 ?
  68.             <div class="lp_content1_c" style="display: none;">8 w( H, m9 S# i" z: [6 P3 W5 s( L. Q
  69.                 <!--[diy=henan]--><div id="henan" class="area"></div><!--[/diy]-->
    ( P2 F7 E' W4 q5 I# ~$ {" ^6 r
  70.             </div>
    - _: ?- G3 m5 f
  71.             <div class="lp_content1_c" style="display: none;">9 L# {* X& J7 E! @. p
  72.                 <!--[diy=hebei]--><div id="hebei" class="area"></div><!--[/diy]-->
    * D& \% o- \( z$ V
  73.             </div>
    * k( m: a, f9 L$ `9 r
  74.             <div class="lp_content1_c" style="display: none;">3 Z$ t) e4 U7 [% d2 I1 R* S$ ]
  75.                 <!--[diy=hubei]--><div id="hubei" class="area"></div><!--[/diy]-->
    ( m; n% q8 e" C) p
  76.             </div>: s' k' r: O" I$ K' x# ?
  77.             <div class="lp_content1_c" style="display: none;">
    # `6 w# w$ Z: X8 C, K: v
  78.                 <!--[diy=hunan]--><div id="hunan" class="area"></div><!--[/diy]--> ' k5 R1 h7 f* O/ g( y# u: c9 x7 V
  79.             </div>
    , W) l: u# u* K
  80.             <div class="lp_content1_c" style="display: none;">
    1 _0 w' I( O' r7 M
  81.                 <!--[diy=anhui]--><div id="anhui" class="area"></div><!--[/diy]-->
    ' ~$ T, E$ E- F( P8 Y
  82.             </div>
    0 K! b7 f6 I! S2 K
  83.             <div class="lp_content1_c" style="display: none;">
    9 d! q& f0 S. A1 F8 {; I3 W
  84.                 <!--[diy=jiangxi]--><div id="jiangxi" class="area"></div><!--[/diy]-->
      N# R, e: x0 p9 s+ U/ \
  85.             </div>7 \/ i; j9 }  N- }6 f
  86.             <div class="lp_content1_c" style="display: none;">
    8 ?/ u3 J+ S) V3 I9 w1 f
  87.                 <!--[diy=liaoning]--><div id="liaoning" class="area"></div><!--[/diy]--> 1 c: p+ p& w4 e# v5 i# F2 I/ J
  88.             </div>: N, X9 Y5 x" {" N, R6 k
  89.             <div class="lp_content1_c" style="display: none;">
    * U! I2 q  w7 `, p/ e: G$ Z
  90.                 <!--[diy=jining]--><div id="jining" class="area"></div><!--[/diy]--> 2 Q) ~! j( @  K, s9 V
  91.             </div>7 T; z" C. [3 G9 {6 L# n. m; _# l" F
  92.             <div class="lp_content1_c" style="display: none;">
    9 v! S6 |0 s" Y8 Y: {
  93.                 <!--[diy=heilongjiang]--><div id="heilongjiang" class="area"></div><!--[/diy]--> 6 y" P, ~$ H& c' @, J4 N0 ]) b
  94.             </div>
    8 W  ?9 E! O$ p+ Y0 Q- Z1 @
  95.             <div class="lp_content1_c" style="display: none;">: k9 p; E" a' ^% w6 x  Z% G# {6 u
  96.                 <!--[diy=shanxi]--><div id="shanxi" class="area"></div><!--[/diy]--> - g* R! }! f7 X  V) N1 E! Q
  97.             </div>7 h' c8 K0 S/ q( E0 T4 ~; n) Y
  98.             <div class="lp_content1_c" style="display: none;">$ w% Q" {; W; O; _* k3 f1 F! g
  99.                 <!--[diy=neimenggu]--><div id="neimenggu" class="area"></div><!--[/diy]-->
    . ?) u6 V8 _* y7 z1 F: b4 J2 W
  100.             </div>4 p$ b6 y& r% D1 I
  101.             <div class="lp_content1_c" style="display: none;">
    # q' L' T' |  O) g
  102.                 <!--[diy=shanxi1]--><div id="shanxi1" class="area"></div><!--[/diy]-->
    # Z# m0 t, f) v" {
  103.             </div>% ?4 x/ ~* R5 f& L; N0 X
  104.             <div class="lp_content1_c" style="display: none;">
    0 Z1 o# w7 ^) w3 r+ X0 Q
  105.                 <!--[diy=ningxia]--><div id="ningxia" class="area"></div><!--[/diy]-->
    ) @; i, J) s1 @$ P  e- }7 [
  106.             </div>
    5 p# I/ l$ {; ~1 R
  107.             <div class="lp_content1_c" style="display: none;">
    6 E$ l2 V! b' {( S
  108.                 <!--[diy=gansu]--><div id="gansu" class="area"></div><!--[/diy]--> % W/ |8 g+ o5 y/ l; f
  109.             </div>8 p$ v! |* l. b6 I9 v( ]/ P# L5 E
  110.             <div class="lp_content1_c" style="display: none;">& h# a8 N8 s6 Z) @3 C
  111.                 <!--[diy=qinghai]--><div id="qinghai" class="area"></div><!--[/diy]--> 0 L5 j3 q( P  h7 k
  112.             </div>
      L0 u% Y% ?6 m3 d4 V  G& u" |
  113.             <div class="lp_content1_c" style="display: none;">
    * W/ d$ _7 |% S: s$ N
  114.                 <!--[diy=chongqing]--><div id="chongqing" class="area"></div><!--[/diy]-->
    - f1 j3 U, Z9 ?. M) D
  115.             </div>
    ; w4 ]3 {5 k7 o$ D" H( m9 D
  116.             <div class="lp_content1_c" style="display: none;">
    : K1 z8 ^( C* `6 e6 I
  117.                 <!--[diy=guizhou]--><div id="guizhou" class="area"></div><!--[/diy]--> $ e+ P% R. l4 x! r& d
  118.             </div>: ^7 x2 M: L3 M) s6 c6 A) S3 j# g* u
  119.             <div class="lp_content1_c" style="display: none;">' i3 m' p( \$ [
  120.                 <!--[diy=guangxi]--><div id="guangxi" class="area"></div><!--[/diy]-->
    / J( {* u2 b& y8 l7 L
  121.             </div>* p' {) k* t2 v# \" ?1 p" m
  122.             <div class="lp_content1_c" style="display: none;">
    , k/ u6 b( r* r* B" F( j& L$ V
  123.                 <!--[diy=yunnan]--><div id="yunnan" class="area"></div><!--[/diy]-->
    ! O. r0 d7 h) M7 N" w$ G# q
  124.             </div>
    . C$ O! A* p- z6 E" W* V; O
  125.             <div class="lp_content1_c" style="display: none;">7 A7 \5 w+ r& v
  126.                 <!--[diy=xizang]--><div id="xizang" class="area"></div><!--[/diy]--> 0 H% J. I$ V4 ~
  127.             </div>9 Y* T+ |3 M; c6 P( y& s) q
  128.             <div class="lp_content1_c" style="display: none;">, \7 V& b- _0 f  I2 M4 j5 k
  129.                 <!--[diy=xinjiang]--><div id="xinjiang" class="area"></div><!--[/diy]--> $ h  e/ g8 f3 D- M/ @, b
  130.             </div>
    ; Z8 P4 I, c! F
  131.             <div class="lp_content1_c" style="display: none;">
    ; E7 T. g, \. Z; Q* K
  132.                 <!--[diy=hainan]--><div id="hainan" class="area"></div><!--[/diy]-->
    1 T4 o3 C  g! }% ?8 P, k
  133.             </div>
    6 p; A) d& f/ Y& x  ]! E
  134.         </div>
    1 x/ O. G- y  R  O1 U* g/ {4 W( @; M
  135.     </div>
    ! Q1 f4 ?) Y2 |" D5 `; ~3 @4 w
  136. </div>
复制代码
JS代码如下:0 y! o( w& U; s, C7 O2 Z- P$ t
游客,如果您要查看本帖隐藏内容请回复
CSS代码如下:9 J* h* X$ Q; G. D+ \) F
游客,如果您要查看本帖隐藏内容请回复

# \* K+ ^8 v( L6 _5 a8 Q
( _; K. M" F2 K【注明:此JS为鼠标滑动效果,如需换成点击切换效果请将JS中的mouseover改为click即可8 G" b6 W9 h, w) f- D. x

【兔源码原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的导航

【兔源码原创】在DZ专题上利用JS+CSS实现自动切换或点击效果的导航

7 }) O6 B/ }# ]. X6 a: d. S7 i; a
( |, S7 ?; q3 l* C

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




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

本版积分规则

广告

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

兔源码 QQ交流群:493651246  GMT+8, 2019-8-24 20:05
←站长统计工具 查看密码:tuyuanma

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

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

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