广告

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

 找回密码
 立即注册
PS教程

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

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

DZ站长建站交流群:493651246

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


演示地址:http://hao.p2p110.com/
(文末配置演示图)


制作方式:
1、将template/default/portal/portal_topic_content.htm文件复制到template/当前模板/portal/portal_topic_content.htm,并重命名portal_topic_*****.htm,*****为需要命名的新名字(必须是英文状态,如portal_topic_daohang.htm
2、登入网站后台,门户——专题管理——创建专题
3、输入专题名称——静态化名称(必须是英文状态,如daohang)——设置二级域名(可不设置)——SEO描述——SEO关键字——模板名(这里选择刚重命名的新文件portal_topic_daohang.htm)——提交
4、删除文件中默认代码段,需删除代码如下:
  1. <!--[diy=diypage]-->
  2. <div id="diypage" class="area">
  3.         <div id="frame1" class="frame move-span frame-1 cl">
  4.                 <div class="frame-title title" id="frame1"><span class="titletext">{lang frame}</span></div>
  5.                 <div id="frame1_left" class="column frame-1-c"></div>
  6.         </div>
  7. </div>
  8. <!--[/diy]-->
复制代码
5、将如下PHP代码复制到刚刚删除的代码位置,保存。
6、刷新专题页面,导入DIY文件,DIY文件如下:
游客,如果您要查看本帖隐藏内容请回复

PHP代码如下:
  1. <div class="daohang728">
  2.     <div class="daohang7281">
  3.         <div class="daohang">
  4.             <a href="javascript:void();" class="a_menu cur">全部</a>
  5.             <a href="javascript:void();" class="a_menu">北京</a>
  6.             <a href="javascript:void();" class="a_menu">上海</a>
  7.             <a href="javascript:void();" class="a_menu">浙江</a>
  8.             <a href="javascript:void();" class="a_menu">广东</a>
  9.             <a href="javascript:void();" class="a_menu">天津</a>
  10.             <a href="javascript:void();" class="a_menu">四川</a>
  11.             <a href="javascript:void();" class="a_menu">江苏</a>
  12.             <a href="javascript:void();" class="a_menu">山东</a>
  13.             <a href="javascript:void();" class="a_menu">福建</a>
  14.             <a href="javascript:void();" class="a_menu">河南</a>
  15.             <a href="javascript:void();" class="a_menu">河北</a>
  16.             <a href="javascript:void();" class="a_menu">湖南</a>
  17.             <a href="javascript:void();" class="a_menu">湖北</a>
  18.             <a href="javascript:void();" class="a_menu">安徽</a>
  19.             <a href="javascript:void();" class="a_menu">江西</a>
  20.             <a href="javascript:void();" class="a_menu">辽宁</a>
  21.             <a href="javascript:void();" class="a_menu">吉林</a>
  22.             <a href="javascript:void();" class="a_menu">黑龙江</a>            
  23.             <a href="javascript:void();" class="a_menu">陕西</a>
  24.             <a href="javascript:void();" class="a_menu">内蒙古</a>
  25.             <a href="javascript:void();" class="a_menu">山西</a>
  26.             <a href="javascript:void();" class="a_menu">宁夏</a>
  27.             <a href="javascript:void();" class="a_menu">甘肃</a>
  28.             <a href="javascript:void();" class="a_menu">青海</a>
  29.             <a href="javascript:void();" class="a_menu">重庆</a>
  30.             <a href="javascript:void();" class="a_menu">贵州</a>
  31.             <a href="javascript:void();" class="a_menu">广西</a>
  32.             <a href="javascript:void();" class="a_menu">云南</a>
  33.             <a href="javascript:void();" class="a_menu">西藏</a>
  34.             <a href="javascript:void();" class="a_menu">新疆</a>
  35.             <a href="javascript:void();" class="a_menu">海南</a>
  36.         </div>
  37.         <div class="lp_content1">
  38.             <div class="lp_content1_c" style="display: block;">
  39.                 <!--[diy=quanbu]--><div id="quanbu" class="area"></div><!--[/diy]-->
  40.             </div>
  41.             <div class="lp_content1_c" style="display: none;">
  42.                 <!--[diy=beijing]--><div id="beijing" class="area"></div><!--[/diy]-->
  43.             </div>
  44.             <div class="lp_content1_c" style="display: none;">
  45.                 <!--[diy=shanghai]--><div id="shanghai" class="area"></div><!--[/diy]-->
  46.             </div>
  47.             <div class="lp_content1_c" style="display: none;">
  48.                 <!--[diy=zhejiang]--><div id="zhejiang" class="area"></div><!--[/diy]-->
  49.             </div>
  50.             <div class="lp_content1_c" style="display: none;">
  51.                 <!--[diy=guangdong]--><div id="guangdong" class="area"></div><!--[/diy]-->
  52.             </div>
  53.             <div class="lp_content1_c" style="display: none;">
  54.                 <!--[diy=tianjin]--><div id="tianjin" class="area"></div><!--[/diy]-->
  55.             </div>
  56.             <div class="lp_content1_c" style="display: none;">
  57.                 <!--[diy=sichuan]--><div id="sichuan" class="area"></div><!--[/diy]-->
  58.             </div>
  59.             <div class="lp_content1_c" style="display: none;">
  60.                 <!--[diy=jiangsu]--><div id="jiangsu" class="area"></div><!--[/diy]-->
  61.             </div>
  62.             <div class="lp_content1_c" style="display: none;">
  63.                 <!--[diy=shandong]--><div id="shandong" class="area"></div><!--[/diy]-->
  64.             </div>
  65.             <div class="lp_content1_c" style="display: none;">
  66.                 <!--[diy=fujian]--><div id="fujian" class="area"></div><!--[/diy]-->
  67.             </div>
  68.             <div class="lp_content1_c" style="display: none;">
  69.                 <!--[diy=henan]--><div id="henan" class="area"></div><!--[/diy]-->
  70.             </div>
  71.             <div class="lp_content1_c" style="display: none;">
  72.                 <!--[diy=hebei]--><div id="hebei" class="area"></div><!--[/diy]-->
  73.             </div>
  74.             <div class="lp_content1_c" style="display: none;">
  75.                 <!--[diy=hubei]--><div id="hubei" class="area"></div><!--[/diy]-->
  76.             </div>
  77.             <div class="lp_content1_c" style="display: none;">
  78.                 <!--[diy=hunan]--><div id="hunan" class="area"></div><!--[/diy]-->
  79.             </div>
  80.             <div class="lp_content1_c" style="display: none;">
  81.                 <!--[diy=anhui]--><div id="anhui" class="area"></div><!--[/diy]-->
  82.             </div>
  83.             <div class="lp_content1_c" style="display: none;">
  84.                 <!--[diy=jiangxi]--><div id="jiangxi" class="area"></div><!--[/diy]-->
  85.             </div>
  86.             <div class="lp_content1_c" style="display: none;">
  87.                 <!--[diy=liaoning]--><div id="liaoning" class="area"></div><!--[/diy]-->
  88.             </div>
  89.             <div class="lp_content1_c" style="display: none;">
  90.                 <!--[diy=jining]--><div id="jining" class="area"></div><!--[/diy]-->
  91.             </div>
  92.             <div class="lp_content1_c" style="display: none;">
  93.                 <!--[diy=heilongjiang]--><div id="heilongjiang" class="area"></div><!--[/diy]-->
  94.             </div>
  95.             <div class="lp_content1_c" style="display: none;">
  96.                 <!--[diy=shanxi]--><div id="shanxi" class="area"></div><!--[/diy]-->
  97.             </div>
  98.             <div class="lp_content1_c" style="display: none;">
  99.                 <!--[diy=neimenggu]--><div id="neimenggu" class="area"></div><!--[/diy]-->
  100.             </div>
  101.             <div class="lp_content1_c" style="display: none;">
  102.                 <!--[diy=shanxi1]--><div id="shanxi1" class="area"></div><!--[/diy]-->
  103.             </div>
  104.             <div class="lp_content1_c" style="display: none;">
  105.                 <!--[diy=ningxia]--><div id="ningxia" class="area"></div><!--[/diy]-->
  106.             </div>
  107.             <div class="lp_content1_c" style="display: none;">
  108.                 <!--[diy=gansu]--><div id="gansu" class="area"></div><!--[/diy]-->
  109.             </div>
  110.             <div class="lp_content1_c" style="display: none;">
  111.                 <!--[diy=qinghai]--><div id="qinghai" class="area"></div><!--[/diy]-->
  112.             </div>
  113.             <div class="lp_content1_c" style="display: none;">
  114.                 <!--[diy=chongqing]--><div id="chongqing" class="area"></div><!--[/diy]-->
  115.             </div>
  116.             <div class="lp_content1_c" style="display: none;">
  117.                 <!--[diy=guizhou]--><div id="guizhou" class="area"></div><!--[/diy]-->
  118.             </div>
  119.             <div class="lp_content1_c" style="display: none;">
  120.                 <!--[diy=guangxi]--><div id="guangxi" class="area"></div><!--[/diy]-->
  121.             </div>
  122.             <div class="lp_content1_c" style="display: none;">
  123.                 <!--[diy=yunnan]--><div id="yunnan" class="area"></div><!--[/diy]-->
  124.             </div>
  125.             <div class="lp_content1_c" style="display: none;">
  126.                 <!--[diy=xizang]--><div id="xizang" class="area"></div><!--[/diy]-->
  127.             </div>
  128.             <div class="lp_content1_c" style="display: none;">
  129.                 <!--[diy=xinjiang]--><div id="xinjiang" class="area"></div><!--[/diy]-->
  130.             </div>
  131.             <div class="lp_content1_c" style="display: none;">
  132.                 <!--[diy=hainan]--><div id="hainan" class="area"></div><!--[/diy]-->
  133.             </div>
  134.         </div>
  135.     </div>
  136. </div>
复制代码
JS代码如下:
游客,如果您要查看本帖隐藏内容请回复
CSS代码如下:
游客,如果您要查看本帖隐藏内容请回复


【注明:此JS为鼠标滑动效果,如需换成点击切换效果请将JS中的mouseover改为click即可

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

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




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




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

本版积分规则

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

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

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

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

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